Gulp watch, running multiple tasks issue - gulp

I'm trying to setup a Gulp task that converts Sass into CSS and then minifies it.
Here's my current gulpfile.js
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('minify-css', function() {
return gulp.src('css/*.css')
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass','minify-css']);
});
I run gulp sass:watch and I expect it to convert main.scss into main.css which it does and then I see that it also runs minify-css, but it doesn't actually minify it.
If I run gulp minify-css, it works perfectly. Can someone please tell me how this needs to be adjusted so gulp.watch runs both tasks, one after another?
Thank you

Looks like I got this work, by removing the additional task and combining the css minify into the sass portion.
// include gulp
var gulp = require('gulp');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
//gulp sass
gulp.task('sass', function () {
gulp.src('./scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(minifyCss({compatibility: 'ie8'}))
.pipe(gulp.dest('./css'));
});
// gulp.task('minify-css', function() {
// return gulp.src('css/*.css')
// .pipe(minifyCss({compatibility: 'ie8'}))
// .pipe(gulp.dest('css'));
// });
gulp.task('sass:watch', function () {
gulp.watch('./scss/main.scss', ['sass']);
});

Related

gulp-sass with browsersync inject not working

// variable
// -----------------------------------------------------------------------------
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();
// task
// -----------------------------------------------------------------------------
gulp.task('styles', function() {
return gulp.src([
'./src/assets/styles/*.scss'
], {
base: './src/assets/styles/'
})
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./dist/assets/styles/'))
.pipe(browserSync.stream());
});
gulp.task('browserSync', function() {
browserSync.init({
server: {
baseDir: './dist/'
}
});
gulp.watch('./dist/*.html').on('change', browserSync.reload);
gulp.watch('./src/assets/styles/**/*.scss', ['styles']);
gulp.watch('./dist/assets/scripts/*.js').on('change', browserSync.reload);
});
How can make above code working? The scripts and html part working, but scss part not, when scss file change, styles task has start and finish with no error, the html file has body tag, but the browser do not inject the new css file.
Check this example, it may help you with a few tweaks in paths:
/**
* This example:
* Uses the built-in BrowserSync server for HTML files
* Watches & compiles SASS files
* Watches & injects CSS files
*/
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var gulp = require('gulp');
var sass = require('gulp-sass');
var filter = require('gulp-filter');
// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
browserSync({
server: {
baseDir: "./"
}
});
});
// Sass task, will run when any SCSS files change.
gulp.task('sass', function () {
return gulp.src('scss/styles.scss')
.pipe(sass({includePaths: ['scss']})) // compile sass
.pipe(gulp.dest('css')) // write to css dir
.pipe(filter('**/*.css')) // filter the stream to ensure only CSS files passed.
.pipe(reload({stream:true})); // inject into browsers
});
// Default task to be run with `gulp`
gulp.task('default', ['sass', 'browser-sync'], function () {
gulp.watch("scss/*.scss", ['sass']);
});

Gulp watch doesn't not compile my .scss at each modification

I encounter a problem with Gulp, I can not compile my .scss at each modification. When I run "gulp watch" and make changes in my css, nothing happens.
gulp css works, gulp watch doesn't work.
Yet everything looks good.
Do you have an idea ?
Thanks !
// Requires
var gulp = require('gulp');
// Include plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var minifycss = require('gulp-minify-css');
// var sourcemaps = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
// tâche CSS = compile vers knacss.css et knacss-unminified.css
gulp.task('css', function () {
return gulp.src('./src/assets/css/style.scss')
.pipe(sass())
.pipe(autoprefixer())
.pipe(rename('knacss.css'))
.pipe(gulp.dest('./dist/assets/css/'))
.pipe(rename('style.css'))
//.pipe(sourcemaps.init())
.pipe(minifycss())
//.pipe(sourcemaps.write('.', {includeContent: false}))
.pipe(gulp.dest('./dist/assets/css/'));
});
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['css']);
});
gulp.task('default', ['css']);
Gulp watch doesn't not compile my .scss at each modification
That's because you don't tell it to.
You are only watching *.scss files in ./src/assets/css, not in subfolders.
To include subfolders, use this syntax:
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/**/*.scss'], ['css']);
});
try with something like.
//SASS task
gulp.task('sass', function () {
var sassPath = {
cssSrc: ['./src/assets/css/*.scss'], cssDest: './src/assets/css/'
};
gulp.src(sassPath.cssSrc)
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest(sassPath.cssDest))
.pipe(livereload());
});
and then in your watch:
// Watcher
gulp.task('watch', function() {
gulp.watch(['./src/assets/css/*.scss'], ['sass']);
});
and:
gulp.task('default', ['sass','css']);

gulp not injecting compiled css

I am using browser-sync and sass among other plugins, but for some reason the browser-sync doesn't inject the css, the sass is getting compiled and being watched but that's it.
here is my gulp file:
'use strict';
const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const pug = require('gulp-pug');
const browserSync = require('browser-sync').create();
const rename = require('gulp-rename');
const reload = browserSync.reload;
// Compile sass files to css
gulp.task('sass', function () {
return gulp.src('./assets/css/*.sass')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 15 versions'],
cascade: true
}))
.pipe(gulp.dest('./site/css'))
.pipe(browserSync.stream())
});
// Compile pug files to html
gulp.task('pug', () =>{
return gulp.src('_pugfiles/*.pug')
.pipe(pug())
.pipe(gulp.dest('./_include'))
.pipe(gulp.dest('./site'))
});
gulp.task('js', function () {
gulp.src("./assets/js/function.js")
.pipe(rename("js/function.js"))
.pipe(gulp.dest("./site"));
});
// the working directory
gulp.task('browser-sync', ['sass', 'pug', 'js'] ,function() {
browserSync.init({
server: {
baseDir: "./site"
},
});
});
// Watch files compiling
gulp.task('watch', function () {
gulp.watch('./assets/css/*.sass', ['sass']);
gulp.watch('./_pugfiles/*.pug', ['pug']);
gulp.watch('./site/*.html').on('change', reload);
gulp.watch('./assets/js/*.js', ['js']);
gulp.watch('./site/js/*.js').on('change', reload)
});
gulp.task('default', ['watch', 'browser-sync']);
and this is my folder structure:
app
_include
_pugfiles
_site
_assets
css
img
js
node_modules
site
so here is what i have tried so far, rebuilding it again, removed few watch tasks
also tried .pipe(browsersync.stream({match: '**/*.css'})); and files: ['!**/*.maps.css'] to ignore css map files.
maybe i have tried other things but i can't remember, i spent most of yesterday trying to fix it.

gulp browsersync sass partials

I have the following problem and don't know whats going wrong with my gulpfile. Everything is working fine and my sass files are being compiled and the browser refreshed when changing something.
But if I add a new partial file and import it into my _base.scss, browsersync is only recognizing the change in that partial and is not compiling the whole sass file & reloading the browser. Does anyone know how to solve this problem? I could not figure out a good solution.
Thanks!
Here's my gulpfile.js
/*=============================================>>>>>
= gulpfile - all the gulptasks are here =
===============================================>>>>>*/
/*----------- variables -----------*/
// gulp
var gulp = require('gulp');
// css stuff
var postcss = require('gulp-postcss');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var cssnext = require('postcss-cssnext');
var lost = require('lost');
var csswring = require('csswring');
// javascript
var babel = require('gulp-babel');
// jade
var jade = require('gulp-jade-php');
// browser sync
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
/*----------- tasks -----------*/
// style task
gulp.task('styles', function(){
var processors = [
autoprefixer,
cssnext,
lost,
csswring
];
return gulp.src('./scss/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss(processors))
.pipe(sourcemaps.write())
.pipe(gulp.dest('./css/'))
.pipe(reload({stream: true}));
;
});
// javascript task
gulp.task('javascript', function(){
return gulp.src('./js/*.js')
.pipe(babel())
.pipe(gulp.dest('./js/dist/'))
.pipe(reload({stream: true}));
});
// jade task
gulp.task('jade', function(){
return gulp.src('./jade/*.jade')
.pipe(jade())
.pipe(gulp.dest('./templates/'))
.pipe(reload({stream: true}));
});
// browser sync
gulp.task('browserSync', function(){
var files = [
'./scss/**/*.scss',
'./css/style.css',
'./*.php',
'./templates/**/*.php',
'./js/*js',
'./jade/*jade'
];
browserSync.init(
files, {
proxy : 'localhost:8888/jobs/heisaplan/',
});
});
// watching the files for changes
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss', ['styles']).on('change', browserSync.reload);
gulp.watch('./js/*.js', ['javascript']).on('change', browserSync.reload);
gulp.watch('./jade/**/*.jade', ['jade']).on('change', browserSync.reload);
gulp.watch('./templates/**/*.php').on('change', browserSync.reload);
gulp.watch('./*.php').on('change', browserSync.reload);
});
// default gulp task
gulp.task('default', ['watch', 'browserSync', 'styles', 'javascript', 'jade']);

Task 'sass' is not in your gulpfile

I've installed gulp and gulp-sass using npm.
Following the examples on github for gulp and gulp-sass I've created this simple gulpfile:
var gulp = require('gulp') ;
var sass = require('gulp-sass') ;
gulp.task('default', function() {
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
}) ;
If I run 'gulp' then nothing really happens - as expected. I get back
[00:20:20] Using gulpfile ~/wa/myproj/gulpfile.js
[00:20:20] Starting 'default'...
[00:20:20] Finished 'default' after 64 μs
That's all fine and dandy.
However, when I run 'gulp sass' I get back this:
[00:21:38] Using gulpfile ~/wa/myproj/gulpfile.js
[00:21:38] Task 'sass' is not in your gulpfile
[00:21:38] Please check the documentation for proper gulpfile formatting
I've clearly got a taks defined for 'sass'. What am I missing?
It probably didn't call because it was the function was inside default, and also default needs to call the other functions, after defining it outside default.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
gulp.src('./sass/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function(){
gulp.watch('./sass/**/*.scss',['sass']);
});
gulp.task('default', ['sass','watch']);
I figured it out:
The 'sass' task was wrapped inside the 'default' task.
This works:
var gulp = require('gulp') ;
var sass = require('gulp-sass') ;
gulp.task('default', function() {
}) ;
gulp.task('sass', function () {
gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
gulp.task('sass:watch', function () {
gulp.watch('./sass/**/*.scss', ['sass']);
});
I have faced the same issue "Task 'sass' is not in your gulpfile" when I use gulp scss command.
But when my friend ran gulp css command in command prompt, it worked properly by updating the CSS file. Please look at the below image, I hope this might help you.
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
gulp.src('./scss/**/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function(){
gulp.watch('./scss/**/*.scss',['sass']);
});
This works for me. Try it out. But I have to say My SASS folder's name is 'scss'. I changed the name and deleted the default task.