I have a static site that uses two gulpfiles to compile. One is gulpfile.dev.js which compiles all the files correctly and uses a static server served by browsersync. The gulpfile.prod.js is the the exact same as the dev file, just without browsersync server. When I compile my file using DeployHQ to move files on my server it doesn't compile the necessary css folder.
My gulpfile.prod.js file:
//DH
var gulp = require('gulp'), //Task runner
uglify = require('gulp-uglify'), //Minimizies JS
sass = require('gulp-ruby-sass'), //Compiles to CSS
imagemin = require('gulp-imagemin'), // Minimize images
concat = require('gulp-concat'),
concatCss = require('gulp-concat-css'),
gutil = require('gulp-util'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
pug = require('gulp-pug'),
htmlmin = require('gulp-htmlmin');
// Define paths for sources and destination.
var paths = {
src: {
js: './src/js/*.js',
sass: './src/sass/**/*.sass',
html: './views/*.pug'
},
dest: {
js: './app/build/js',
css: './app/build/css',
html: './app'
}
};
var autoprefixerOptions = {
browsers: ['last 2 versions', '> 5%', 'Firefox ESR']
};
//Error look-outs in gulp
function errorLog(error){
console.error.bind(error);
this.emit('end');
}
// Scripts
gulp.task('scripts', function(){
gulp.src(paths.src.js)
.pipe(uglify())
.on('error', errorLog)
.pipe(concat('main.js'))
.pipe(gulp.dest(paths.dest.js))
});
// PUG -> HTML
gulp.task('pug', function buildHTML() {
return gulp.src(paths.src.html)
.pipe(pug())
.pipe(gulp.dest(paths.dest.html))
.pipe(htmlmin({collapseWhitespace: true}));
});
// Styles
gulp.task('styles', function(){
return sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
//Run task
gulp.task('default', [
'scripts',
'pug',
'styles']);
These are the bash commands DeployHQ executes to serve the files correctly in the right directory. Most of it is just removing files that I don't need to be on the server. I build the files needed to be served from app/ then move the files to the root html directory. nam run prod translates to gulp default --gulpfile gulpfile.prod.js
cd /var/www/site.com/html
npm install
npm run prod
rm -rf node_modules/ src/ views/
cd app
cp -a build/ /var/www/site.com/html
cp index.html /var/www/site.com/html
cd ..
rm -rf app/
rm .gitlab-ci.yml gulpfile.dev.js gulpfile.prod.js package.json .gitignore README.md
Edit:
Running the prod file locally compiles everything as its supposed to, but on the server it does not. It does not compile the css folder.
Edit 2:
I've changed my styles task to reflect gulp-ruby-sass's documentation to this:
gulp.task('styles', function(){
sass(paths.src.sass)
.on('error', errorLog)
.pipe(autoprefixer(autoprefixerOptions))
.pipe(cssnano())
.pipe(gulp.dest(paths.dest.css))
});
The CSS folder still does not compile.
Related
I am using gulp on a .net project and for some reason the script isnt generating the css file.
Here is my folder structure for the root folder and assets folder:
Here is my gulp script:
require('es6-promise').polyfill();
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
gulp.task('sass', function() {
return gulp.src('./wwwroot/sass/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('./wwwroot/css/'))
});
gulp.task('default', ['sass']);
The script runs fine with no errors, but the css file is not created. Any ideas why this could be?
I just started to use browsersync. So I started learning about gulp.
I installed gulp using npm install gulp -g command. After this I initialized my project directory with package.json file by following command npm init. I then installed gulp in my project directory by npm install gulp --save-dev command.I also installed browsersync by npm install browser-sync --save-dev command.
Now I tried to run browsersync using gulp by gulp browser-sync command which gives me an error Task 'browser-sync' is not in your gulpfile
Below is my gulpfiles.js file
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
// process JS files and return the stream.
gulp.task('js', function () {
return gulp.src('js/*js')
.pipe(browserify())
.pipe(uglify())
.pipe(gulp.dest('dist/js'));
});
// create a task that ensures the `js` task is complete before
// reloading browsers
gulp.task('js-watch', ['js'], function (done) {
browserSync.reload();
done();
});
// use default task to launch Browsersync and watch JS files
gulp.task('serve', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
// add browserSync.reload to the tasks array to make
// all browsers reload after tasks are complete.
gulp.watch("js/*.js", ['js-watch']);
});
I had already tried including module.exports = gulp; line at beginning as well as at end of gulpfile.js but the error persist. My current gulp version is 3.9.1 on mac OSX 10.12.3
Please help I am stuck.
The problem is you called your task serve and not browserSync:
// use default task to launch Browsersync and watch JS files
// NOTE how this task is called serve:
gulp.task('serve', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
You could just change its' name:
// use default task to launch Browsersync and watch JS files
// NOTE at the name of the task now
gulp.task('browser-sync', ['js'], function () {
// Serve files from the root of this project
browserSync.init({
server: {
baseDir: "./"
}
});
I have this node.js code that tries to minify and combine multiple js files to a single js file.
var concat = require('gulp-concat');
var gulp = require('gulp');
gulp.task('scripts', function() {
//gulp.src(['./lib/file3.js', './lib/file1.js', './lib/file2.js'])
gulp.src(['./js/*.js'])
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'))
});
All my js files are located in js folder. My node.js file is above the js folder. I am expecting the single minified file to appear in dist folder. I see nothing and get no error message when I run the code. What could have gone wrong?
Gulpfile.js:
"use strict";
var concat = require('gulp-concat');
var gulp = require('gulp');
var uglify = require('gulp-uglify'); // Add gulp-uglify module to your script
gulp.task('scripts', function() {
gulp.src('./js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});
Check package.json dependencies
Run npm install to verify that all dependencies correctly loaded. I think this was your issue:
{
"dependencies": {
"gulp-concat": "2.x",
"gulp": "3.x",
"gulp-uglify": "1.x"
}
}
I'm using gulp-sourcemaps in my project to process my SASS and JavaScript. My gulpfile.js is correctly generating .map files, though Chrome is showing the wrong filenames in Developer Tools and Console. At the moment, I'm unsure where the issue is.
My project tree:
gulpfile.js
public/
sass/
main.sass
import/
[.. more files and directories (all imported in main.sass) ..]
js/
main.js
test.js
min/
sourcemaps/
main.js.map
main.js
all.js
css/
main.css
sourcemaps/
main.css.map
My gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var sass = require('gulp-ruby-sass');
var plumber = require('gulp-plumber');
var prefix = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var options = {
styles: {
"source": "public/sass/main.sass",
"destination": "public/css",
"sourcemaps": "sourcemaps"
},
scripts: {
"source": "public/js/*.js",
"destination": "public/js/min",
"sourcemaps": "sourcemaps"
}
}
gulp.task('styles', function() {
return sass(options.styles.source, {sourcemap: true, style: 'compressed'})
.pipe(plumber())
.pipe(prefix("last 1 version", "> 1%", "ie 8", "ie 7"))
.pipe(sourcemaps.write(options.styles.sourcemaps))
.pipe(gulp.dest(options.styles.destination));
});
gulp.task('scripts', function() {
return gulp.src(options.scripts.source)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(concat('all.js'))
.pipe(gulp.dest(options.scripts.destination))
.pipe(rename('main.js'))
.pipe(uglify())
.pipe(sourcemaps.write(options.scripts.sourcemaps, {includeContent: false, sourceRoot: '../../'}))
.pipe(gulp.dest(options.scripts.destination));
});
gulp.task('default', ['styles', 'scripts'], function() {
gulp.watch('public/sass/**', ['styles']);
gulp.watch('public/js/**', ['scripts']);
});
The plan is:
'styles' compiles public/sass/main.sass (which includes all of my
SASS source), auto-prefixes the source, writes a sourcemap and
outputs public/css/main.css
'scripts' concatenates all files in the public/js directory, uglifies
the source, writes a sourcemap and outputs public/js/min/main.js
After this entire process, I want to be left with public/css/main.css containing all my compiled, auto-prefixed, minified SASS source and public/js/min/main.js containing all my concatenated, minified, JavaScript source.
At the moment, styles in developer tools show the filename _box-sizing.scss (which is a dependency from public/sass/import/lib/neat), a file that contains no styles for the element I am inspecting. The filename should be _header.sass (from public/sass/import/layouts/common/_header.sass).
Similarly, the console shows main.js no matter the source file. I have public/js/main.js and public/js/test.js - these files should be concatenated and output to public/js/min/main.js. Both these files only contain a single console.log() for testing purposes and the filename displayed in Chrome is main.js for both.
I hope this makes sense. Thank you in advance
I've encountered the same problem without finding a solution. Maybe I'm wrong but it seems that gulp-Sourcemap has one or more issues to resolve.
https://github.com/floridoo/gulp-sourcemaps/issues/94#issuecomment-165164311
I made resolution after comment out the css beautify code in gulpfile.js
//.pipe(cssbeautify()) OR
//.pipe(uglify())
I am relatively new to gulp and browserify. For my understanding, if you could please explain how I could use browserify with my current gulp file...
As I'm using 'require' for my gulp modules, would I get any benefit using browserify? If so, how would it benefit me?
var sass = require('gulp-sass'),
concat = require('gulp-concat'),
watch = require('gulp-watch'),
gulp = require('gulp'),
minifyCSS = require('gulp-minify-css'),
rename = require('gulp-rename'), // to rename any file
destination = 'public/css';
// task to compile sass, minify then rename file
gulp.task('sass', function () {
gulp.src('public/sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest(destination))
.pipe(concat('style.css'))
.pipe(gulp.dest(destination))
.pipe(minifyCSS())
.pipe(rename('style.min.css'))
.pipe(gulp.dest(destination));
});
// save typing gulp sass, and use just gulp instead
gulp.task('default', ['sass']);
// simple watch task
gulp.task('watch', function () {
gulp.watch('public/sass/**/*.scss', ['sass']);
});
What do you think browserify does?
At the moment, I don't see any need to include it as you are not processing/bundling any scripts.