I have the following configuration:
// Watch
gulp.task('watch', function () {
gulp.watch('_01_src/js/**/*.js', ['babel']);
gulp.watch('_01_src/scss/**/*.scss', ['scss']);
});
gulp.task('default', ['scss', 'babel', 'watch']);
If I execute watch alone: "gulp watch" is working with no issue. If I execute "gulp", watch is started but is not working and I don't understand why (I tried changing the position in array but no luck).
In your example, it runs scss, babel and watch asynchronously, that could cause problems. Maybe just set scss and babel to run before watch is started at all?
// Watch
gulp.task('watch', ['scss', 'babel'], function () {
gulp.watch('_01_src/js/**/*.js', ['babel']);
gulp.watch('_01_src/scss/**/*.scss', ['scss']);
});
gulp.task('default', ['watch']);
Instead of list parameters try using gulp.series() and gulp.parallel().
So your example would look like:
// Watch
gulp.task('watch', function (done) {
gulp.watch('_01_src/js/**/*.js', function(){
gulp.series('babel')();
});
gulp.watch('_01_src/scss/**/*.scss', function(){
gulp.series('scss')();
});
done();
});
gulp.task('default', gulp.series(gulp.parallel('scss', 'babel'), 'watch'));
This way scss and babel will run in parallel, and watch will run after that.
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.
I am scratching my head around but can't seem to figure out whats wrong with the following gulpfile which simply watch and compile less file.
This simply won't watch less changes, I have tried all gulp, gulp watch. I have to manually run gulp after each change to compile them. Is there something wrong that causing watch to not work as expected?
Gulp Version
CLI version 1.4.0
Local version 3.9.1
NPM 4.1.2
Node v7.7.2
var gulp = require('gulp');
var less = require('gulp-less');
// gulp compile paths
var paths = {
dist: 'assets/dist'
};
gulp.task('css', function() {
return gulp.src('assets/less/styles.less')
.pipe(less({
compress: true
}))
.pipe(gulp.dest(paths.dist))
});
gulp.task('watch', function() {
gulp.watch('assets/less/*.less', ['css']); // Watch all the .less files, then run the less task
});
gulp.task('default', ['watch']);
Make sure you have correct path to the .less files also you need to add bowersync.reload for it to work.
gulp.task('watch', function () {
gulp.watch('assets/less/*.less', ['css']);
// init server
browserSync.init({
server: {
proxy: "local.build",
baseDir: appPath.root
}
});
gulp.watch([appPath.root + '**'], browserSync.reload);
});
gulp.task('default', ['watch']);
When I run my gulp file everything works as expected and I receive no errors. However, whenever I make changes to the SCSS files, the terminal shows the cleanCss, sass, and autoprefixer tasks running but the changes are not reflected in the final CSS file.
I have gone through everything and can't come up with why this is happening. The tasks running out of order is all I can think of but I can't figure out why they run fine on the first run but not on subsequent runs. Here's some of my code:
// default gulp task
gulp.task('default', ['cleanCss', 'cleanJs', 'cleanImg', 'sass', 'scripts', 'imagePro', 'autoprefixer', 'watch']);
//watch for changes
gulp.task('watch', function() {
gulp.watch('./assets/img/*', ['cleanImg', 'imagePro']);
gulp.watch('./assets/js/*.js', ['cleanJs', 'scripts']);
gulp.watch('./assets/sass/bootstrap/*.scss', ['cleanCss', 'sass', 'autoprefixer']);
});
//
//Compile scss to css
//
gulp.task('sass', ['cleanCss'], function () {
gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
//
// Post Process CSS
//
// Add Vendor Prefixes
gulp.task('autoprefixer', ['cleanCss', 'sass'], function() {
gulp.src('./assets/css/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./assets/build/css'));
});
If you want your asynchronous tasks to run in order you need to return the stream. Example:
gulp.task('sass', ['cleanCss'], function () {
return gulp.src('./assets/sass/*.scss')
.pipe(sass.sync().on('error', sass.logError))
// .pipe(sass({outputStyle: 'compressed'}))
.pipe(gulp.dest('./assets/css'));
});
Check the docs for Async task support in https://github.com/gulpjs/gulp/blob/master/docs/API.md
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.
I'm putting together a gulpfile and I was wondering if you can combine gulp-notify (or some other solution) with a watch task so that a message pops up when the watch task has started running. I can't find anything from my searches on how I would go about doing this. Is it even possible?
Here's my watch task:
// Watch our files for changes
gulp.task('watch', function() {
// -- I wanna run a notify message here saying 'Watching for changes...' -- //
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});
This should do it:
gulp.task('watch', function() {
notify("Watching for changes...").write('');
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});
Also, if you meant to have a notification each time a file changes, you could do something like this:
gulp.task('watch', function () {
//...
gulp.watch([
'./src/**/*.html',
'./src/**/*.php',
]).on('change', function () {
browserSync.reload();
notify("File changed: browser synced").write('');
});
});
I managed to do it with gulp-notify and node-notifier.
After you gulp tasks pipe the notifier and in the callback use the node-notifier to show the popup.
var notify = require('gulp-notify');
var nodeNotifier = require('node-notifier');
gulp().src(options.src)
.pipe(gulp.dest(options.dest))
.pipe(notify(function () {
nodeNotifier.notify({
'title': 'App',
'message': 'Build'
});
}));
Can't you just use
gulp.task('watch', function() {
console.log('Watching for changes...');
gulp.watch('assets/styles/**/*.scss', ['styles']);
gulp.watch('assets/scripts/**/*.js', ['scripts']);
gulp.watch('assets/images/**/*', ['images']);
});