Get Gulp watch to perform function only on changed file
gulp, gulp-watch, javascript
Solution
This is how:
// Watch for file updates
gulp.task('watch', function () {
livereload.listen();
// Javascript change + prints log in console
gulp.watch('js/*.js').on('change', function(file) {
livereload.changed(file.path);
gutil.log(gutil.colors.yellow('JS changed' + ' (' + file.path + ')'));
});
// SASS/CSS change + prints log in console
// On SASS change, call and run task 'sass'
gulp.watch('sass/*.scss', ['sass']).on('change', function(file) {
livereload.changed(file.path);
gutil.log(gutil.colors.yellow('CSS changed' + ' (' + file.path + ')'));
});
});
Also great to use gulp-livereload with it, you need to install the Chrome plugin for it to work btw.
Problem
I am new to Gulp and have the following Gulpfile ``` var gulp = require('gulp'); var jshint = require('gulp-jshint'); var concat = require('gulp-concat'); var rename = require('gulp-rename'); var uglify = require('gulp-uglify'); gulp.task('compress', function () { return gulp.src('js/*.js') // read all of the files that are in js with a .js extension .pipe(uglify()) // run uglify (for minification) .pipe(gulp.dest('dist/js')); // write to the dist/js file }); // default gulp task gulp.task('default', function () { // watch for JS changes gulp.watch('js/*.js', function () { gulp.run('compress'); }); }); ``` I would like to configure this to rename, minify and save only my changed file to the dist folder. What is the best way to do this?