I've got a Gulp task setup to compile .scss files with compass, and also another task running which injects changed CSS into the browser via BrowserSync.
gulp.task('browser-sync', function () {
var options = {
files: './public/css/**/*.css',
proxy: ecs_domain,
port: 3000
};
browserSync(options);
});
gulp.task('compass', function () {
gulp.src('./scss/**/*.scss')
.pipe(compass({
css: cssOutput,
sass: 'scss'
}))
.pipe(gulp.dest(cssOutput))
.pipe(reload({stream: true}));
});
The problem I'm finding is that when compass is run, I get output like in the following snippet:
identical public/css/main.css
[BS] File changed: public/css/main.css
Even though the file main.css hasn't changed, compass somehow touches it, making BrowserSync think it has changed, meaning that even if only one file changes, the entire set of CSS files are re-injected to the browser.
Is there a way to leave the identical/unchanged *.css files un-touch-ed so BrowserSync can only load the files that actually changed?
We have quite a few files and makes the whole process quite slow.
I've found a partial solution. I installed gulp-changed and redirected output from compass to a temporary .out folder. Then created a watch to run gulp-changed when files differ from public/css and .out version using the following task:
gulp.task('copy-changed-css', function () {
gulp.src('.out/**/*.css')
.pipe(changed('public/css', {hasChanged: changed.compareSha1Digest}))
.pipe(gulp.dest('public/css'))
});
Related
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 am a new gulp user. I am in a situation here. I want to run a process if any change happens in any of the ".js" files changes.
what i did was
gulp.task('watch', function() {
watch('./src/**/*.js', batch(function() {
gulp.start('js-process');
}));
});
js-process is the task which i have to run.
To start the process.I did ,
gulp.task('default', ['js-process','css-process', 'copy-otherfiles','watch']);
My problem is , its working only once, At first time if any change occurs it works fine, But for further any change in any .js files, the watch doesn't work
Any Ideas? Thanks
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
I want to use gulp to watch changes happened in A directory and apply the same changes to B directory.
Initially, I'll copy everything under directory A into directory B.
The changes can be:
modify a file
add a file
delete a file
add a directory
delete a directory
I'm unable to use gulp-watch to achieve the above tasks. Gulp-watch can't detect a file is deleted.
I haven't tested this, but this is what I just finished writing for myself:
var gulp = require("gulp"),
removeFiles = require("gulp-remove-files"),
watch = require("gulp-watch");
gulp.task("default", function() {
gulp.watch("./assets/**/*.*", function() {
gulp.run("update-static");
});
});
gulp.task("update-static", function() {
// copy assets
gulp.src("./_static/assets/**/*.*")
.pipe(removeFiles());
gulp.src("./assets/**/*.*")
.pipe(gulp.dest("./_static/assets"));
});
I'm super new to task runners, so I'm not entirely sure this will work. You'll of course need to modify the paths and everything as you require.
I'm using gulp-watch plugin and would like to copy newly added files in the source to the target destination.
watch({glob:SOURCE + '/**/*.js'})
.pipe(plumber())
.pipe(gulp.dest(DESTINATION));
Every time a new file is added into the SOURCE directory I get "Bus error: 10" and the watch breaks without copying the newly added file.
Please you this syntax for adding new files in gulp
gulp.task('task_name', function() {
return watch({
glob: SOURCE
}, function(files) {
return files.pipe(plumber()).pipe(jade()).pipe(gulp.dest(DESTINATION));
});
});
gulp.watch doesn't create a source stream, it triggers on file changes and calls tasks.
Try creating a simple move task alongside a watch task, then trigger the move from the watch. Something like this:
gulp.task('move-js', function() {
gulp.src('./js-src/**/*.js')
.pipe(gulp.dest('./js-dest'));
});
gulp.task('watch-js', ['move-js'], function() {
gulp.watch('./js-src/**/*.js', ['move-js']);
});
Note that the watch-js task has move-js as a dependency, this will call the move task whenever the watch is invoked, rather than waiting for something in the watched directory to change.
I repeated the glob for clarity, but that should probably be stored in a variable.