I have set up a very simple gulpfile.js There are only two task - 'sass' and 'minify-js'. These two tasks are fired by the task 'watch' when a change is detected. It all seems to be working well: Gulp is listening for changes, *.scss files are compiled into CSS, the console generates output as expected, without any errors. However, the CSS files do not get minified there are no output files from the 'minify-css' task whatsoever.
Why is 'minify-css' not working? What am I missing here?
This is my gulpfile.js:
var gulp = require('gulp');
var sass = require('gulp-sass');
var watch = require('gulp-watch');
var minifyCSS = require('gulp-minify-css');
gulp.task('sass', function() {
gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('minify-css', function() {
gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['sass', 'minify-css']);
});
Sounds like a race condition. Sass and MinifyCSS are executed in parallel, might be that your Sass task isn't done when you're already running MinifyCSS. Sass should be a dependency, so you have two options:
Make Sass a dependency from minifycss:
gulp.task('minify-css', ['sass'], function() {
return gulp.src('plugins/SoSensational/styles/dest/*.css')
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
gulp.task('watch', function() {
gulp.watch('plugins/SoSensational/styles/sass/*.scss', ['minify-css']);
});
Have one task that does both!
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
The latter one is actually the preferred version. You save yourself a lot of time if you don't have an intermediate result
Btw: Don't forget the return statements
I know this is kind of an old question but thought I'd throw this out there because it's something that's helped me. To build on the answer from ddprrt, I'd recommend changing:
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass())
.pipe(minifyCSS())
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
to:
var rename = require('gulp-rename');
gulp.task('sass', function() {
return gulp.src('plugins/SoSensational/styles/sass/*.scss')
.pipe(sass('site.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'))
.pipe(minifyCSS())
.pipe(rename('site.min.css'))
.pipe(gulp.dest('plugins/SoSensational/styles/dest/'));
});
This allows you to debug with the un-minified CSS and deploy the minified version.
It's because the gulp-minify-css is deprecated. Use gulp-clean-css instead.
Click here(https://www.npmjs.com/package/gulp-minify-css "npm-clean-css")!
Related
I try to get a simple workflow running where changes in the sass-file are immediately translated into css and displayed in the browser (using this tutorial: https://css-tricks.com/gulp-for-beginners/)
I looked through multiple answers to simliar questions here but couldn't find a solution.
This is my gulpfile:
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function() {
return gulp.src('app/**/*.sass') // Gets all files ending with .scss in app/scss
.pipe(sass())
.pipe(gulp.dest('app/css'))
.pipe(browserSync.reload({
stream: true
}))
});
var browserSync = require('browser-sync').create();
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: 'app'
},
})
})
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
When I call gulp sass it works perfectly fine. Also, when I remove the browsersync and only use the following code the watching itself works:
gulp.task('watch', function(){
gulp.watch('app/scss/*.sass', gulp.series(['sass']));
})
There must be something wrong with the way the browsersyncing is (not) happening. Can someone help me out? Many thanks in advance!
The following is not in gulp v4 syntax:
gulp.task('watch', gulp.series(['browserSync'], ['sass']), function(){
gulp.watch('app/**/*.sass', gulp.series(['sass']));
})
Move the function into the series arguments. So try this instead:
gulp.task('watch', gulp.series('browserSync', 'sass', function(){
gulp.watch('app/**/*.sass', gulp.series('sass'));
}));
In this way gulp.task() takes 2 arguments instead of 3 - that is the gulp v4 way. That article was written in v3 syntax unfortunately, with a few warnings to change the code for v4.
Gulp-livereload is giving me an error when I save a change to my .scss files. My gulpfile.js has been working fine for years and just started giving me trouble a little while ago. The scss gets compiled to css and livereload tries to reload the page, but I get the following error (photo attached: https://i.stack.imgur.com/o57el.png). When I manually reload the page the error goes away and the style changes are reflected. Also, if I make changes to other files (i.e. HTML or JavaScript) everything works just fine.
It may also be worth mentioning, I am using MAMP to create a local Apache server, so I don't think I can make use of something else like browsersync. Any help would be much appreciated, thank you!
Here is what my gulpfile.js looks like.
'use strict';
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');
gulp.task('sass', function () {
return gulp.src('./styles/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass.sync().on('error', sass.logError))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./styles/css'))
.pipe(livereload());
});
gulp.task('html', function() {
return gulp.src('./**/*.html')
.pipe(livereload());
});
gulp.task('js', function() {
return gulp.src('./js/*.js')
.pipe(livereload());
});
gulp.task('watch', function () {
livereload.listen();
gulp.watch('./styles/sass/**/*.scss', gulp.series('sass'));
gulp.watch('./*.html', gulp.series('html'));
gulp.watch('./js/*.js', gulp.series('js'));
});
When I use partials on the scss structure, I have to deal with frequent browser sync error (like reloading forever). Notice that it is an intermittent error so it is not a common compiling problem (although it might be somewhat related) and it doesn't happen when I don't use partials. Also, I don't think it is project related or a gulpfile issue either, since it occurs with any project and I have tried more than one gulpfile structure. Anyway, you can check it out below:
var gulp = require('gulp');
var sass = require('gulp-sass');
var clean = require('gulp-clean');
var browserSync = require('browser-sync').create();
var autoprefixer = require('gulp-autoprefixer');
gulp.task('styles', function () {
gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
gulp.task('copy', ['clean'], function () {
return gulp.src('src/**/*')
.pipe(gulp.dest('dist'));
});
gulp.task('clean', function () {
return gulp.src('dist')
.pipe(clean());
});
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
gulp.watch('src/**/*').on('change', browserSync.reload)
});
gulp.task('default', ['styles', 'serve']);
A couple of things that might help: (1) add a return statement in your 'styles' task and (2) remove the second watch because it calls browserSync.reload which is already called at the end of the 'styles' task and you don't need to call it twice. So make these changes:
gulp.task('styles', function () {
// added return below
return gulp.src('src/scss/app.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer())
.pipe(gulp.dest('src/css'))
.pipe(browserSync.reload({stream: true}));
});
and the second watch is unnecessary and possibly a problem:
gulp.task('serve',function () {
browserSync.init({
server: {
baseDir: 'src/'
}
});
gulp.watch('src/scss/*.scss', ['styles']);
// remove below watch
// gulp.watch('src/**/*').on('change', browserSync.reload)
gulp.watch("./*.html").on("change", browserSync.reload);
});
I am a new to using Gulp, just trying to learn it...Now the problem i get and want to ask is the way to setup default task with watch and browser sync included
I need to know am i doing something wrong
Can anybody improve my code here, i don't understand the relation of watch and browser sync, which tasks to run before browser-sync and when to watch
Below is my folder structure
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');
//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
.pipe(plumber())
.pipe(uglify())
.pipe(gulp.dest('build/js'));
});
//compress images
gulp.task('imagemin', function(){
gulp.src('img/**/*.+(png|jpg|gif|svg)')
.pipe(cache(imagemin({
interlaced: true
})))
.pipe(gulp.dest('build/img'));
});
//CSS styles
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'));
});
gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
.pipe(plumber())
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css'))
.pipe(reload({stream:true})); // inject into browsers
});
gulp.task('htmlmin', function(){
return gulp.src('*.html')
.pipe(htmlmin({removeComments: true}))
.pipe(gulp.dest('build'))
.pipe(reload({stream:true})); // inject into browsers
});
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
server: {
baseDir: "./"
}
});
});
/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
/* Watch scss, run the sass task on change. */
gulp.watch(['less/**/*.less'], ['less'])
//Watch css min
gulp.watch(['build/css/*.css'], ['cssmin'])
/* Watch app.js file, run the scripts task on change. */
gulp.watch(['js/*.js'], ['scripts'])
/* Watch .html files, run the bs-reload task on change. */
gulp.watch(['*.html'], ['htmlmin']);
// gulp.watch('app/*.html', browser-sync.reload);
// gulp.watch('app/js/**/*.js', browser-sync.reload);
});
Now the process i want is
Compile less to css and then minify it to build folder
List item
Then Minify my HTML code
Then minify and concatenate my js
Compress all the images (Run only when some images changes)
Run the minified HTML with Browser Sync and watch the changes in all my source HTML,Less, images and JS
I would not worry about minification at this point if your goal is to run in development mode, this applies for imagemin (i would do that offline anyways), cssmin, htmlmin, and your js task that runs uglify by default. Ideally you would want to debug in the browser, and having your code minified will not help you much. If you add a dist task to perform the minification step.
I understand that you need Less to CSS for obvious reasons. So you are looking for something like this:
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');
// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {
browserSync.init({
server: "./"
});
gulp.watch("less/*.less", ['less']);
gulp.watch("*.html").on('change', browserSync.reload);
});
gulp.task('less', function(){
gulp.src('less/style.less')
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('build/css'))
.pipe(browserSync.stream());
});
gulp.task('default', ['serve']);
This code invokes serve as the main task. Serve task has less as a dependency (which is going to be invoked first). Then, the callback is finally invoked. BrowserSync is initialized and a watch is added for both html files and less files.
Check out this page if you want to learn more about gulp + browsersync integration.
What is the proper way to use gulp-watch plugin?
...
var watch = require('gulp-watch');
function styles() {
return gulp.src('app/styles/*.less')
.pipe(watch('app/styles/*.less'))
.pipe(concat('main.css'))
.pipe(less())
.pipe(gulp.dest('build'));
}
gulp.task('styles', styles);
I don't see any results when run gulp styles.
In your shell (such as Apple's or Linux's Terminal or iTerm) navigate to the folder that your gulpfile.js. For example, if you're using it with a WordPress Theme your gulpfile.js should be in your Theme's root. So navigate there using cd /path/to/your/wordpress/theme.
Then type gulp watch and hit enter.
If your gulpfile.js is configured properly (see example below) than you will see output like this:
[15:45:50] Using gulpfile /path/to/gulpfile.js
[15:45:50] Starting 'watch'...
[15:45:50] Finished 'watch' after 11 ms
Every time you save your file you'll see new output here instantly.
Here is an example of a functional gulpfile.js:
var gulp = require('gulp'),
watch = require('gulp-watch'),
watchLess = require('gulp-watch-less'),
pug = require('gulp-pug'),
less = require('gulp-less'),
minifyCSS = require('gulp-csso'),
concat = require('gulp-concat'),
sourcemaps = require('gulp-sourcemaps');
gulp.task('watch', function () {
gulp.watch('source/less/*.less', ['css']);
});
gulp.task('html', function(){
return gulp.src('source/html/*.pug')
.pipe(pug())
.pipe(gulp.dest('build/html'))
});
gulp.task('css', function(){
return gulp.src('source/less/*.less')
.pipe(less())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
});
gulp.task('js', function(){
return gulp.src('source/js/*.js')
.pipe(sourcemaps.init())
.pipe(concat('app.min.js'))
.pipe(sourcemaps.write())
.pipe(gulp.dest('build/js'))
});
gulp.task('default', [ 'html', 'js', 'css', 'watch']);
Note: Anywhere you see source/whatever/ this is a path you'll either need to create or update to reflect the path you're using for the respective file.
gulp.task('less', function() {
gulp.src('app/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build'));
});
gulp.task('watch', function() {
gulp.watch(['app/styles/*.less'], ['less'])
});
Name your task like I have my 'scripts' task named so you can add it to the series. You can add an array of tasks to the series and they will be started in the order they are listed. For those coming from prior versions note the return on the gulp.src.
This is working code I hope it helps the lurkers.
Then (for version 4+) you need to do something like this:
var concat = require('gulp-concat'); // we can use ES6 const or let her just the same
var uglify = require('gulp-uglify'); // and here as well
gulp.task('scripts', function(done) {
return gulp.src('./src/js/*.js')
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist/js/'));
});
gulp.task('watch', function() {
gulp.watch('./src/js/*.js',gulp.series(['scripts']))
});
** Note the line gulp.watch('./src/js/*.js',gulp.series(['scripts'],['task2'],['etc']))