We Keep Coding

Gulp watch only detects the first change

I am working on gulp and implementing watch functionality. But the gulp watch detects the changes only for the first time.
I want to write the code so that it detects the changes in CSS and JS files and performs minification and concatenation on the development environment.
I am using the following code:
var gulp = require('gulp');
var concat = require('gulp-concat');
var clean_css = require('gulp-clean-css');
var uglify = require('gulp-uglify');
gulp.task('style', function(){
gulp.src(['assets/css/style.css', 'assets/css/custom.css'])
.pipe(concat('build.min.css'))
.pipe(clean_css())
.pipe(gulp.dest('assets/build'));
});
gulp.task('script', function(){
gulp.src(['assets/js/jquery.js', 'assets/js/custom.js'])
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/build'));
});
gulp.task('watch', function(){
gulp.watch('assets/css/*.css', gulp.series('style') );
gulp.watch('assets/js/*.js', gulp.series('script'));
});

This is probably because gulp does not know the task has finished the first time so it will not re-start the task again when you modify a file next. This can be solved just by adding return statements to your tasks:
gulp.task('style', function(){
return gulp.src(['assets/css/style.css', 'assets/css/custom.css'])
.pipe(concat('build.min.css'))
.pipe(clean_css())
.pipe(gulp.dest('assets/build'));
});
gulp.task('script', function(){
return gulp.src(['assets/js/jquery.js', 'assets/js/custom.js'])
.pipe(concat('build.min.js'))
.pipe(uglify())
.pipe(gulp.dest('assets/build'));
});

Forward reference tasks not defined before use

I am using multiple files with gulp#4 where the main gulpfile.js includes all other files within the ./tasks/ directory. We are using the npm gulp-hub package to include multiple gulpfiles with the ./tasks/ directory. However we are getting the following error message when calling the tasks.
Forward referenced tasks 'clean-minify-js` not defined before use
How can we include multiple gulpfiles within the main gulpfile.js so that we can call tasks?
Current gulpfile.js:
'use strict';
var gulp = require('gulp'),
HubRegistry = require('gulp-hub');
var genericHub = new HubRegistry('./tasks/scripts.js');
gulp.registry(genericHub);
var watchers = function(done) {
gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
done();
}
gulp.task('watch', gulp.series(watchers));
Current ./tasks/scripts.js
'use strict';
var gulp = require('gulp'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify');
gulp.task('clean-scripts', function() {
return gulp.src(dest.js)
.pipe(clean({read:false, force: true});
});
gulp.task('minify-js', gulp.series('clean-scripts', function() {
gulp.src(src.js)
.pipe(uglify())
.pipe(gulp.dest(dest.js));
}));
gulp.task('clean-minify-js', gulp.series('minify-js'));
Folder structure:
some/path/gulpfile.js
some/path/tasks/scripts.js

To resolve the issue, I had to do the following.
Use the require-dir package to include all files within the ./tasks/ directory.
convert tasks that were designed for gulp#3.9.1 into functions for gulp#4
use gulp.series to set the functions to run in the particular order we needed
gulpfile.js
'use strict';
var gulp = require('gulp'),
requireDir = require('require-dir');
requireDir('./tasks/');
var watchers = function(done) {
gulp.watch('src/*.js', gulp.parallel('clean-minify-js'));
done();
}
gulp.task('watch', gulp.series(watchers));
./tasks/scripts.js
'use strict';
var gulp = require('gulp'),
clean = require('gulp-clean'),
uglify = require('gulp-uglify');
function cleanScripts() {
return gulp.src(dest.js)
.pipe(clean({read:false, force: true});
}
function minJs() {
return gulp.src(src.js)
.pipe(uglify())
.pipe(gulp.dest(dest.js));
}
gulp.task('clean-minify-js', gulp.series(cleanScripts, minJs));

gulp sass not minifying

Having a task to process SCSS files (where some of them are just plain CSS) the end result is not minified .. This is part of my gulpfile.js:
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var concatCss = require('gulp-concat-css');
var minifyCss = require('gulp-minify-css');
var estilos = [
'app/scss/bootstrap.scss', /*a bunch of includes of other scss files*/
'node_modules/select2/dist/css/select2.min.css',
'node_modules/magnific-popup/dist/magnific-popup.css',
'app/scss/estilos.scss',
'app/scss/indexSlider.scss'
]
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(minifyCss())
.pipe(concatCss('final.min.css'))
.pipe(gulp.dest('public/css'))
});
I just started 2 days ago with gulp so my debugging skills are pretty minimum so far... what I'm I doing wrong for the final file not being minified?

you have a different src in your estilos, at first you have to compile them each to css, then merge. You can find the answer in this example https://ypereirareis.github.io/blog/2015/10/22/gulp-merge-less-sass-css/.
Hope is there help you)

Try moving the concat before the minifying:
gulp.task('css', function() {
return gulp.src(estilos)
.pipe(sass({ style: 'compressed' }).on('error', gutil.log))
.pipe(concatCss('final.min.css'))
.pipe(minifyCss())
.pipe(gulp.dest('public/css'))
});
that should fix it.
Also I would recommend to use gulp-clean-css because gulp-minify-css has being deprecated.

gulp tasks - concatenate files that created by another gulp task

I want to minify my js files in my /_dev folder then rename them and copy hem to minify-js folder, then concatenate minified files.
I use a gulpfile.js like this:
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function() {
return gulp.src('_dev/js/libraries/*.js')
.pipe(uglify())
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('minifiedJS'));
});
gulp.task('concatFiles',['minify-js'],function (){
return gulp.src(['minifiedJS/jquery.jplayer.min.js', 'minifiedJS/jplayer.playlist.min.js', 'minifiedJS/LinkToPlayer.min.js'])
.pipe(concat('final.js'))
.pipe(gulp.dest('_dist/js'));
});
when I run:
gulp concatFiles
minify-js task create the following file in minifiedJSfolder.
jquery.jplayer.min.js
jplayer.playlist.min.js
LinkToPlayer.min.js
but final.js won't create till I run gulp concatFiles command again.
how can i solve this problem?

You may try in one task as following
var gulp = require('gulp'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat');
gulp.task('minify-js', function(){
return gulp.src('_dev/js/libraries/*.js')
.pipe(concat('concat.js'))
.pipe(gulp.dest('dist'))
.pipe(rename('final.js'))
.pipe(uglify())
.pipe(gulp.dest('dist'));
});
gulp.task('default', ['minify-js'], function(){});

Detect what file change with gulp

I have this gulpfile:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
I want to know what file trigger the watcher and his absolute path.
For example: if my project is placed in /myCode and I change the file src/main.js, I want to see /myCode/src/main.js inside minifyJS task. Is there a way to do it?
Thank you for your time.

You can do it by using gulp-ng-annotate and gulp-changed:
var gulp = require('gulp');
var changed = require('gulp-changed');
var rename = require('gulp-rename');
var ngAnnotate = require('gulp-ng-annotate'); // just as an example
var SRC = 'src/*.js';
var DEST = 'src/';
//Function to get the path from the file name
function createPath(file) {
var stringArray = file.split('/');
var path = '';
var name = stringArray[1].split('.');
stringArray = name[0].split(/(?=[A-Z])/);
if (stringArray.length>1) {stringArray.pop()};
return {folder: stringArray[0], name: name[0]}
}
gulp.task('default', function () {
return gulp.src(SRC)
.pipe(changed(DEST))
// ngAnnotate will only get the files that
// changed since the last time it was run
.pipe(ngAnnotate())
.pipe(rename(function (path) {
var createdPath = createPath(path);
path.dirname = createdPath.folder;
path.basename: createdPath.name,
path.prefix: "",
path.suffix: "",
path.extname: ".min.js"
}))
.pipe(gulp.dest(DEST));
});
Result:

Use gulp-changed npm package.
$ npm install --save-dev gulp-changed
Try the below in gulp file, (I haven't tried)
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
changed = require('gulp-changed');
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(changed('min'))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
see the documentation of this package https://www.npmjs.com/package/gulp-changed

Based on your comment to Julien's answer this should be fairly close to what you want, or at least get you going in the right direction:
var gulp = require('gulp'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
cache = require('gulp-cached'),
rename = require('gulp-rename'),
path = require('path');
function fileName(file) {
return file.dirname + path.sep + file.basename + file.extname;
}
gulp.task('minifyJS', function() {
return gulp.src(['src/*.js'])
.pipe(cache('minifyJS'))
.pipe(rename(function(file) {
var nameOfChangedFile = fileName(file);
if (nameOfChangedFile == './main.js') {
file.basename = 'main.min'
}
if (nameOfChangedFile == './userView.js') {
file.basename = 'user/userView.min'
}
console.log(nameOfChangedFile + ' -> ' + fileName(file));
}))
.pipe(uglify())
.pipe(gulp.dest('min'));
});
gulp.task('watch', function() {
gulp.watch(['src/*.js'], ['minifyJS']);
});
This uses gulp-cached to keep an in-memory cache of all the files in your src/ folder that have passed through the stream. Only files that have changed since the last invocation of minifyJS are passed down to the gulp-rename plugin.
The gulp-rename plugin itself is then used to alter the destination path of the changed files.
Note: the cache is empty on first run, since no files have passed through the gulp-cached plugin yet. This means that the first time you change a file all files in src/ will be written to the destination folder. On subsequent changes only the changed files will be written.