I have a task :
gulp.task('styles', ['cleanup'], function () {
'use strict';
log('Compiling Less files to :' + config.temp);
return gulp
.src(config.less)
.pipe(less())
.pipe(autoprefixer({browsers: ['last 2 versions', '> 5%']}))
.pipe(gulp.dest(config.temp));
});
This tasks works like it should when I call it manually. It deletes the files in config.temp (not shown in code snippet) and recompiles the less to css and places it again in config.temp directory.
The problem is when I try to run this task inside gulp.watch :
gulp.task('watch', function() {
gulp.watch(config.less, ['styles']);
});
The task doens't work anymore. I can see gulp picking up changes I make in my less files, I see the log output, there are no errors, yet still the task hasn't really happend. My css output remains the same.
Another indication that the tasks aren't really executed, is the time that gulp spend; when I do it manually it takes longer :
then when the gulp watch runs the same task :
I have been following a tutorial that does the exact same thing, and I have some example files that also use gulp.watch and work.
I have seen some mentioning of gulp-watch but I'm not sure that's the same as gulp.watch?
Hope it's some obvious mistake someone can point out to me.
Some things to try:
Try the debugging i mentioned in the comments
Add this in the styles task, right after you pipe in the source code.
.pipe($.plumber()) // exit gracefully if something fails after this
also, make sure you check your version of the gulp.
I wish I could just delete this question because apparently there is nothing wrong: Webstorm was just too bloody slow in refreshing itself, so I always thought the .css file hadn't changed. I just needed to wait approx 45 seconds. Sorry for wasting internet space!
Related
I have the following setup:
// watch for changes
gulp.task('watch', function () {
gulp.watch('./assets/**/*.less', ['compile-less']);
});
gulp.task("compile-less", () => {
return gulp.src('./assets/build-packages/*.less')
.pipe($.less({
paths: [ $.path.join(__dirname, 'less', 'includes') ]
}))
.pipe(gulp.dest(OutputPath)); // ./dist/styles/
});
So basically every time a developer changes something in a less file it runs the task 'compile-less'. The task 'compile-less' builds our package less files (including all the #imports). The first change in a random less file works, all the less files are being build. The second time it runs the task but my generated dist folder isn't updated when I change something to a less file that is imported. I'm wondering if the combination of the watch task and the compiling task somehow caches files. Because if I run the compile-less task manually it works everytime.
Does anyone had the same experience?
gulp-less version 4.0.0 has a strange caching issue.
Install gulp-less#3.5.0 and will solve the issue.
This will be fixed. Check out https://github.com/stevelacy/gulp-less/issues/283#ref-issue-306992692
So I have a task like so:
gulp.task('scripts', function() {
return gulp.src(['app/scripts/app.js', 'app/scripts/controllers/**/*.js', 'app/scripts/services/**/*.js', 'app/scripts/directives/**/*.js', 'app/scripts/libs/**/*.js' ])
.pipe(concat('external.min.js'))
.pipe(ngAnnotate())
.pipe(uglify())
.pipe(gulp.dest('app/scripts'))
.pipe(gulp.dest('dist/scripts'))
});
and I have a watch task:
gulp.task('watch', ['sass-dev', 'scripts'], function() {
gulp.watch('app/style/sass/**/*.scss', ['sass-dev']);
gulp.watch('app/scripts/**/*.js', ['scripts']);
});
All works well, except whenever I save a JS file, "scripts" runs multiple times. I'm assuming the problem lies with the gulp.src and it looking at multiple files, but I'm not sure.
This is no big deal (to me), but sometimes I'll swap over to the command line and the task is running infinitely. It just keeps getting called over and over again.
If you haven't already guessed, I'm running Angular, which is why app.js is first and I have ngAnnotate.
Can someone shed some light on why the script runs continuously sometimes?
I guess the problem is .pipe(gulp.dest('app/scripts')). You're doing some stuff (uglify and angular stuff) with your scripts and then you place them in the same folder you're watching. So the scripts task will launch again and again and again.
You should remove this line and only place your distribution scripts in your distribution folder and leave your app files untouched.
Im trying to use gulp and jscs to prevent code smell. I also want to use watch so that this happens when ever a change is made. The problem I'm running into is jscs is modify the source file that is being watched. This causes gulp to go into an infinite loop of jscs modifying the file and then watch seeing the change and firing off jscs again and again and again ...
const gulp = require('gulp');
gulp.task('lint', function() {
return gulp.src('/src/**/*.js')
.pipe(jscs({
fix: true
}))
.pipe(jscs.reporter())
.pipe(gulp.dest('/src'));
});
gulp.task('watch', function() {
gulp.watch('/src/**/*.js', ['lint']);
});
It's generally a bad idea to override source files from a gulp task. Any Editors/IDEs where those files are open might or might not handle that gracefully. It's generally better to write the files into a separate dist folder.
That being said here's two possible solutions:
Solution 1
You need to stop the gulp-jscs plugin from running a second time and writing the files again, thus preventing the infinite loop you're running into. To achieve this all you have to do is add gulp-cached to your lint task:
var cache = require('gulp-cached');
gulp.task('lint', function() {
return gulp.src('/src/**/*.js')
.pipe(cache('lint'))
.pipe(jscs({
fix: true
}))
.pipe(cache('lint'))
.pipe(jscs.reporter())
.pipe(gulp.dest('/src'));
});
The first cache() makes sure that only files on disk that have changed since the last invocation of lint are passed through. The second cache() makes sure that only files that have actually been fixed by jscs() are written to disk in the first place.
The downside of this solution is that the lint task is still being executed twice. This isn't a big deal since during the second run the files aren't actually being linted. gulp-cache prevents that from happening. But if you absolutely want to make sure that lint is run only once there's another way.
Solution 2
First you should use the gulp-watch plugin instead of the built-in gulp.watch() (that's because it uses the superior chokidar library instead of gaze).
Then you can write yourself a simple pausableWatch() function and use that in your watch task:
var watch = require('gulp-watch');
function pausableWatch(watchedFiles, tasks) {
var watcher = watch(watchedFiles, function() {
watcher.close();
gulp.start(tasks, function() {
pausableWatch(watchedFiles, tasks);
});
});
}
gulp.task('watch', function() {
pausableWatch('/src/**/*.js', ['lint']);
});
In the above the watcher is stopped before the lint task starts. Any .js files written during the lint task will therefore not trigger the watcher. After the lint task has finished, the watcher is started up again.
The downside of this solution is that if you save a .js file while the lint task is being executed that change will not be picked up by the watcher (since it has been stopped). You have to save the .js file after the lint task has finished (when the watcher has been started again).
I have a gulp task that performs some pretty common tasks - it runs jshint to validate my code, then concats and minimizes the files and outputs them into single .min.js files.
The task (appears) to execute flawlessly when I run it manually. But the second I try to use it in a $gulp.watch it no longer outputs my file (it still executes and executes jshint though).
The code in my task:
gulp.src(path.join(workingPath, folder, '/*.js'))
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail')) //stop build if errors found
.on('error', function() {
console.log("Please review and correct jshint errors.");
this.end();
})
.pipe(order([ //order files before concat - ensure module definitions are first
"*.module.js",
"*.js"
]))
.pipe(concat(filename+'.js'))
.pipe(gulp.dest(destinationPath)) //full combined version
.pipe(uglify())
.pipe(rename(filename+'.min.js'))
.pipe(gulp.dest(destinationPath)) //minified combined version
.on('error',function() {
console.log("An error occurred during Gulp processing.");
this.end();
});
My gulp watch (the task is named 'components'):
gulp.watch(componentsBasePath+"/**/*.js",['components']);
One thing that I've noticed though is at the end of the manual run I see "Process finished with exit code..". And if I kill my gulp.watch it outputs "Process finished with exit code.." - then it DOES creates the output files!
My goal is to have my 'components' task create those output files every time it is triggered by the watch - not just when I kill the watch.
Thank you!
Cliff
Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things.
gulp watchers act on file save.
jetbrains will not auto update the project files (as you have found out it uses a cache).
To get around this problem i created a macro called saveSync which does the following actions:
Save all
Synchronize
Synchronize
Synchronize
Why did i synchronize 3 times? Because gulp takes a few seconds to finish tasks (compiling, etc) and if you update before they finish obviously the project view doesn't get update properly. I haven't figured out a way to insert a time delay into the macro itself.
After i created the macro, i just rebound ctrl + s from save all to the macro, and it worked.
If there is a 'cleaner' way of doing this i have yet to discover it.
Ran this by someone else and he found the cause of the issue. Though - it's not Gulp related at all it turns out.
The IDE I was using updated the folder and file structure instantly when I manually ran my 'components' task, however it did not do the same when I ran the gulp.watch task. I am happy to report though that the files were being created successfully, they just never appeared in the IDE until I killed the task.
I have the following code fragment in my gulpfile.
gulp.task('static', function() {
return gulp.src(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'])
.pipe(gulp.dest(outputDir + '/'))
});
gulp.task('watch', function() {
gulp.watch(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'], ['static']);
});
gulp.task('dev', ['static']);
gulp.task('default', ['watch', 'dev']);
If I run gulp dev, gulp watch or gulp static, everything works fine. However, if I run just gulp (default), it does the static task 5 times. Can anyone help me out with why this is happening?
P.S. The paths passed to watch are such because if I don't disclude the directories as separate paths, it seems to be copying the empty directories js and scss for some reason.
Probably because you're not returning the tasks, and you need them to be asyc.
See this: Gulp.js task, return on src?
and the docs (also linked in SO post above) https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
Also, the dev task looks redundant in its current form - you may as well use the task static directly, unless you plan to bundle in more tasks with dev