Gulp watch not called from within Nodemon - javascript

So I have my Gulp file as below.
The 'watch' block seems to work absolutely fine, and do what is expected. Nodemon works in the way that it detects file changes and refreshes the server, that works too.
But I can't for the life of me get Nodemon to call the 'watch' method when a file changes.
On line 81, the .on('start' is called succesfully from nodemon, but the code inside the 'watch' method is never executed.
var gulp = require('gulp');
var gutil = require('gulp-util'); // For logging stats and warnings
var jshint = require('gulp-jshint'); // For checking JavaScript for warnings
var concat = require('gulp-concat'); // For joining together multiple files
var uglify = require('gulp-uglify'); // For minimising files
var coffee = require('gulp-coffee'); // For compiling coffee script into js
var cofLint = require('gulp-coffeelint');// For checking coffee script for errors
var less = require('gulp-less'); // For compiling Less into CSS
var cssLint = require('gulp-csslint'); // For checking the awesomeness of css
var minCss = require('gulp-minify-css');// For minifying css
var uncss = require('gulp-uncss'); // For deleting unused CSS rules
var footer = require('gulp-footer'); // For adding footer text into files
var nodemon = require('gulp-nodemon'); // For the super cool instant refreshing server
var bSync = require('browser-sync'); // Syncs the place between multiple browsers for dev
var es = require('event-stream'); // For working with streams rather than temp dirs
var sourcePath = "sources";
var destPath = "public";
var jsFileName = "all.min.js";
var cssFileName = "all.min.css";
var footerText = "";
/* JavaScript Tasks */
gulp.task('scripts', function(){
var jsSrcPath = sourcePath + '/javascript/**/*';
var jsResPath = destPath + '/javascript';
var jsFromCs = gulp.src(jsSrcPath+'.coffee')// Get all coffee script
.pipe(cofLint()) // Check CS for errors or warnings
.pipe(cofLint.reporter()) // Output the error results
.pipe(coffee()); // Convert coffee to vanilla js
var jsFromPlain = gulp.src(jsSrcPath+'.js');// get all vanilla JavaScript
return es.merge(jsFromCs, jsFromPlain) // Both js from cs and vanilla js
.pipe(jshint()) // Check js errors or warnings
.pipe(jshint.reporter('jshint-stylish')) // Print js errors or warnings
.pipe(concat(jsFileName,{newLine: ';'})) // Concatenate all files together
.pipe(uglify()) // Minify JavaScript
.pipe(footer(footerText)) // Add footer to script
.pipe(gulp.dest(jsResPath)); // Save to destination
});
/* CSS Tasks */
gulp.task('styles', function(){
var cssSrcPath = sourcePath + '/styles/**/*';
var cssResPath = destPath + '/stylesheet';
var cssFromLess = gulp.src(cssSrcPath+'.less') // Get all Less code
.pipe(less()); // Convert Less to CSS
var cssFromVanilla = gulp.src(cssSrcPath+'.css');// Get all CSS
return es.merge(cssFromLess, cssFromVanilla) // Combine both CSS
.pipe(cssLint()) // Check CSS for errors or warnings
.pipe(cssLint.reporter()) // And output the results
.pipe(concat(cssFileName)) // Concatenate all files together
.pipe(minCss({compatibility: 'ie8'})) // Minify the CSS
.pipe(gulp.dest(cssResPath)); // Save to destination
});
/* Configure files to watch for changes */
gulp.task('watch', function() {
gulp.watch(sourcePath+'/**/*.{js,coffee}', ['scripts']);
gulp.watch(sourcePath+'/**/*.{css,less}', ['styles']);
});
/* Start Nodemon */
gulp.task('demon', function () {
nodemon({
script: './bin/www',
ext: 'js coffee css less html',
env: { 'NODE_ENV': 'development'}
})
.on('start', ['watch'])//TODO: ERROR: watch is never called, even though start is called
.on('change', ['watch'])
.on('restart', function () {
console.log('restarted!');
});
});
/* Default Task */
gulp.task('default', ['demon']);
Any suggestions why this may be happening?
Is there something wrong with my Gulp file?
(and yes, I know the code is a little over-commented, I work with apprentices and they like English better than code ;)


The problem is that Nodemon and browser-sync both need to be running. This code works:
gulp.task('nodemon', function (cb) {
var called = false;
return nodemon({
script: './bin/www',
watch: ['source/**/*']
})
.on('start', function onStart() {
if (!called) { cb(); }
called = true;
})
.on('restart', function onRestart() {
setTimeout(function reload() {
bSync.reload({
stream: false
});
}, 500);
});
});
gulp.task('browser-sync', ['nodemon', 'scripts', 'styles'], function () {
bSync.init({
files: ['sources/**/*.*'],
proxy: 'http://localhost:3000',
port: 4000,
browser: ['google chrome']
});
gulp.watch(sourcePath+'/**/*.{js,coffee}', ['scripts']);
gulp.watch(sourcePath+'/**/*.{css,less}', ['styles']);
gulp.watch("sources/**/*").on('change', bSync.reload);
gulp.watch("views/**/*.jade").on('change', bSync.reload);
});
/* Default Task */
gulp.task('default', ['clean', 'browser-sync']);

Related

How to install gulp-sass-glob

When I am trying to save scss files which are imported to main sccs file - every time I need resave main scss file to apply changes. therefore I have decided to install gulp-sass-glob according to this https://www.npmjs.com/package/gulp-sass-glob
but unfortunately it does not work.
Here is my code, please help me how to integrate gulp-sass-glob in my gulp file or what is wrong here. Thank you.
const { src, dest, parallel, series, watch } = require('gulp');
// Load plugins
const sass = require('gulp-sass');
const browsersync = require('browser-sync').create();
const htmlmin = require('gulp-htmlmin');
// Directories
const SRC = './src/';
const DEST = './dist/';
const DEST_CSS = `${DEST}css/`;
const SRC_CSS = `${SRC}scss/*main.scss`;
var gulp = require('gulp');
var sassGlob = require('gulp-sass-glob');
gulp.task('styles', function () {
return gulp
.src(SRC_CSS)
.pipe(sassGlob())
.pipe(sass())
.pipe(gulp.dest(DEST_CSS));
});
// Watch files
function watchFiles() {
watch(`${SRC_CSS}*`, css);
watch(`${SRC}lang`, html);
}
// BrowserSync
function browserSync() {
browsersync.init({
server: {
baseDir: DEST
},
port: PORT
});
}
// Tasks to define the execution of the functions simultaneously or in series
exports.watch = series(
clear,
parallel( css, html, copyStaticHTML, watchFiles, browserSync)
);
exports.default = series(clear, parallel(js, css, html, copyStaticHTML));

Why is merge-stream requiring async completion signal?

I'm in the process of migrating from gulp#3.9.1 to gulp#4.0.2 and upgrading my gulp dependencies in the process. I have the following task in my gulpfile, where you can assume directories is just an array of directories I want to perform this operation on:
var gulp = require('gulp');
var ngAnnotate = require('gulp-ng-annotate'); //annotates dependencies in Angular components
var rev = require('gulp-rev'); //appends a hash to the end of file names to eliminate stale cached files
var revReplace = require('gulp-rev-replace');
var uglify = require('gulp-uglify'); // minimizes javascript files
var compressCss = require('gulp-minify-css');
var useref = require('gulp-useref'); // replaces style and script blocks in HTML files
var filter = require('gulp-filter');
var merge = require('merge-stream');
var sourcemaps = require('gulp-sourcemaps');
function minify() {
var tasks = directories.map(function (directory) {
var cssFilter = filter("**/all.min.css", {restore:true});
var jsAppFilter = filter("**/app.min.js", {restore:true});
var jsFilter = filter("**/*.js", {restore:true});
return gulp.src(dstBasePath + directory + "index.html", {allowEmpty: true})
.pipe(useref())
.pipe(cssFilter)
.pipe(compressCss({keepSpecialComments:false}))
.pipe(rev())
.pipe(cssFilter.restore)
.pipe(jsAppFilter)
.pipe(sourcemaps.init())
.pipe(ngAnnotate({add:true, single_quotes:true}))
.pipe(jsAppFilter.restore)
.pipe(jsFilter)
.pipe(uglify())
.pipe(rev())
.pipe(jsFilter.restore)
.pipe(revReplace())
.pipe(sourcemaps.write('.')) // sourcemaps need to be written to same folder for Datadog upload to work
.pipe(gulp.dest(dstBasePath + directory))
});
return merge(tasks);
}
Why would this result in the error "Did you forget to signal async completion?" from Gulp when running the task? Note that I'm using Gulp 4. I've tried passing a callback done to this task, and adding .addListener('end', done) to the final pipe, but this causes my merged stream to end prematurely (presumably when the first one ends). So perhaps one of these plugins is not signaling when it's completed, but how would you even get this to work otherwise? Thanks for any insight you can provide.

return merge(folders.map(function (folder) { // this has worked for me in the past
as has this form without merge
gulp.task('init', function (done) {
var zips = getZips(zipsPath);
var tasks = zips.map(function (zip) {
return gulp.src(zipsPath + "/" + zip)
.pipe(unzip({ keepEmpty: true }))
.pipe(gulp.dest(path.join("src", path.basename(zip, ".zip"))))
.on('end', function() { // this bit is necessary
done();
});
});
return tasks;
});

Gulp 4 requires that you signal async completion. There's some good information about it in this answer to a similar question:
Gulp error: The following tasks did not complete: Did you forget to signal async completion?
I had a similar case where I was returning a merged set of tasks, and I was able to resolve the error by making the function async and awaiting the merge. My case looked something like this:
gulp.task("build", async function () {
...
return await merge(tasks);
});
so I think you should be able to do something like
async function minify(){
...
return await merge(tasks);
}

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.

gulp will not output js min file

Cant seem to find my problem here. After I run Gulp, the all-css.min.css gets outputted to _build folder but the JS will not go! am I missing something? Cant seem to find what is making this not work.
var gulp = require('gulp');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var minifyHTML = require('gulp-minify-html');
var sourcemaps = require('gulp-sourcemaps');
var minifyCSS = require('gulp-minify-css');
var inlineCss = require('gulp-inline-css');
var rev = require("gulp-rev");
var del = require('del');
var jsBase = {
src: [
'/Scripts/Core/ko.bindinghandlers-1.0.0.js',
'/Scripts/Twitter/typeahead-0.10.2.js',
'/Scripts/LdCore/mobile-core.js',
'/Scripts/LDCore/Chat.js',
'/Scripts/unsure.js' // These have any unknown lines in them.
]
};
gulp.task('clean', function () {
del.sync(['_build/*'])
});
gulp.task('produce-css', function () {
return gulp.src(cssBase.src)
.pipe(minifyCSS({ keepBreaks: false }))
.pipe(concat('all-css.min.css'))
.pipe(gulp.dest('_build/'))
});
gulp.task('produce-minified-js', function () {
return gulp.src(jsBase.src)
//.pipe(sourcemaps.init())
//.pipe(uglify())
.pipe(concat('all.min.js'))
//.pipe(rev()) // adds random numbers to end.
//.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('_build/'));
});
gulp.task('default', ['clean'], function () {
gulp.start('produce-css', 'produce-minified-js');
});

According to Contra at this post, we shouldn't be using gulp.start.
gulp.start is undocumented on purpose because it can lead to
complicated build files and we don't want people using it
Bad:
gulp.task('default', ['clean'], function () {
gulp.start('produce-css', 'produce-minified-js');
});
Good:
gulp.task('default', ['clean','produce-css','produce-minified-js'], function () {
// Run the dependency chains asynchronously 1st, then do nothing afterwards.
});
It's totally legit to have nothing in the gulp.task, as what it's doing is running the dependency chains asynchronously & then terminating successfully.
You could also do the following:
gulp.task('default', ['clean','produce-css','produce-minified-js'], function (cb) {
// Run a callback to watch the gulp CLI output messages.
cb();
});
Since Gulp creates "Starting default" on the CLI, this would help to display "Finished default" in the CLI after everything else runs.

Can I set gulp livereload to run after all files are compiled?

I've got a gulp set up to work with Stylus, Jade and tiny-lr. My problem is that when I save one jade file, it start's compiling them all, therefore live reloading fires on the first file copied to the destination, before the file I am working on currently is compiled, resulting in me having to refresh manually. I have fixing this issue using "gulp-changed" but I don't seem to be able to configure it or something. Anyone had this problem before? I am posting my Gulp file so you can take a look.
A timeline diagram of the problem can be found here: https://www.dropbox.com/s/3g37oy25s9mq969/jade_compile_frefresh_problem.png?dl=0
Any help is appreciated!
'use strict';
var gulp = require('gulp');
var jade = require('gulp-jade');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var jeet = require('jeet');
var nib = require('nib');
var uglify = require('gulp-uglify');
var lr = require('tiny-lr')();
// var mainBowerFiles = require('main-bower-files');
// Define sources object
var sources = {
jade: "jade/**/*.jade",
partials: "partials/**/*.jade",
stylus: "styl/**/*.styl",
scripts: "js/**/*.js"
};
// Define destinations object
var destinations = {
html: "dist/",
css: "dist/css",
js: "dist/js"
};
// Compile and copy Jade
gulp.task("jade", function(event) {
return gulp.src(sources.jade)
.pipe(jade({
pretty: true
})).pipe(gulp.dest(destinations.html));
});
// Compile and copy Stylus
gulp.task("stylus", function(event) {
return gulp.src(sources.stylus).pipe(stylus({
use: [nib(), jeet()],
import: [
'nib',
'jeet'
],
style: "compressed"
})).pipe(gulp.dest(destinations.css));
});
// Minify and copy all JavaScript
gulp.task('scripts', function() {
gulp.src(sources.scripts)
.pipe(uglify())
.pipe(gulp.dest(destinations.js));
});
// Consolidate Bower Files and copy to /dist/js/
// gulp.task('bower-files', function() {
// return gulp.src(mainBowerFiles(/* options */), {})
// .pipe(gulp.dest(destinations.js));
// });
// Watch for file changes and execute tasks
gulp.task("watch", function() {
gulp.watch(sources.jade, ["jade"]);
gulp.watch(sources.partials, ["jade"]);
gulp.watch(sources.stylus, ["stylus"]);
gulp.watch(sources.scripts, ["scripts"]);
gulp.watch('dist/**/*', refresh);
});
// Live Reload
gulp.task('serve', function () {
var express = require('express');
var app = express();
app.use(require('connect-livereload')());
app.use(express.static(__dirname+'/dist/'));
app.listen(4000, '0.0.0.0');
lr.listen(35729);
});
// Define default task
gulp.task("default", ["jade", "stylus", "scripts", "serve", "watch"]);
// Refresh function
var refresh = function(event) {
var fileName = require('path').relative(__dirname, event.path);
gutil.log.apply(gutil, [gutil.colors.magenta(fileName), gutil.colors.cyan('built')]);
lr.changed({
body: { files: [fileName] }
});
};

I have achieve this by writing a simple javascript function in my gulpfile.js
I did this because when I compile my sass files, livereload will run around 10 times, this method will make it only run once.
My gulpfile.js
gulp.task('watch', function() {
$.livereload.listen();
gulp.watch([
path.join(config.path.app, 'media/js/**/*.js'),
path.join(config.path.app, 'media/css/**/*.css'),
path.join(config.path.app, 'templates/**/*.html')
]).on('change', stackReload);
// a timeout variable
var timer = null;
// actual reload function
function stackReload() {
var reload_args = arguments;
// Stop timeout function to run livereload if this function is ran within the last 250ms
if (timer) clearTimeout(timer);
// Check if any gulp task is still running
if (!gulp.isRunning) {
timer = setTimeout(function() {
$.livereload.changed.apply(null, reload_args);
}, 250);
}
}
});

I have done it. What I had to do is create a new task called "Reload", put dependencies on it and run it after each of the other tasks. Here is the new Gulpfile":
'use strict';
var gulp = require('gulp');
var jade = require('gulp-jade');
var gutil = require('gulp-util');
var stylus = require('gulp-stylus');
var jeet = require('jeet');
var nib = require('nib');
var uglify = require('gulp-uglify');
var livereload = require('gulp-livereload');
var sources = {
jade: "jade/**/*.jade",
partials: "partials/**/*.jade",
stylus: "styl/**/*.styl",
scripts: "js/**/*.js"
};
// Define destinations object
var destinations = {
html: "dist/",
css: "dist/css",
js: "dist/js"
};
// Compile and copy Jade
gulp.task("jade", function(event) {
return gulp.src(sources.jade)
.pipe(jade({pretty: true}))
.pipe(gulp.dest(destinations.html))
});
// Compile and copy Stylus
gulp.task("stylus", function(event) {
return gulp.src(sources.stylus).pipe(stylus({
use: [nib(), jeet()],
import: [
'nib',
'jeet'
],
style: "compressed"
})).pipe(gulp.dest(destinations.css));
});
// Minify and copy all JavaScript
gulp.task('scripts', function() {
gulp.src(sources.scripts)
.pipe(uglify())
.pipe(gulp.dest(destinations.js));
});
// Server
gulp.task('server', function () {
var express = require('express');
var app = express();
app.use(require('connect-livereload')());
app.use(express.static(__dirname+'/dist/'));
app.listen(4000, '0.0.0.0');
});
// Watch sources for change, executa tasks
gulp.task('watch', function() {
livereload.listen();
gulp.watch(sources.jade, ["jade", "refresh"]);
gulp.watch(sources.partials, ["jade", "refresh"]);
gulp.watch(sources.stylus, ["stylus", "refresh"]);
gulp.watch(sources.scripts, ["scripts", "refresh"]);
});
// Refresh task. Depends on Jade task completion
gulp.task("refresh", ["jade"], function(){
livereload.changed();
console.log('LiveReload is triggered');
});
// Define default task
gulp.task("default", ["jade", "stylus", "scripts", "server", "watch"]);

You can use gulp-livereload and write your own callback which send reload event when you want it:
var livereload = require('gulp-livereload'),
path = require('path');
module.exports = function(gulp) {
gulp.task('watch', function() {
livereload.listen();
gulp.watch([
path.resolve(__dirname, '../src/**/*.js'),
path.resolve(__dirname, '../index.html')
]).on('change', function(event) {
livereload.changed();
console.log('File', event.path, 'was', event.type);
console.log('LiveReload is triggered');
});
});
};
UPD: So, for your case you can do this in this way:
1) Install gulp-livereload:
npm install gulp-livereload --save-dev
2) Include gulp-livereload in your gulpfile.js
var livereload = require('gulp-livereload');
3) Replace your old code with watch task, I mean that:
// Watch for file changes and execute tasks
gulp.task("watch", function() {
gulp.watch(sources.jade, ["jade"]);
gulp.watch(sources.partials, ["jade"]);
gulp.watch(sources.stylus, ["stylus"]);
gulp.watch(sources.scripts, ["scripts"]);
gulp.watch('dist/**/*', refresh);
});
And replace it with new code:
gulp.task('watch', function() {
livereload.listen();
gulp.watch([
sources.jade,
sources.partials,
sources.stylus,
sources.scripts,
'dist/**/*'
]).on('change', function(event) {
livereload.changed();
console.log('File', event.path, 'was', event.type);
console.log('LiveReload is triggered');
});
});
4) Of cource check that this configuration fits to your requirements.

I had a similar issue when compiling typescript and then refreshing using livereload. To solve the problem, I created "watch tasks" that run a refresh task once the work is finished.
Below is a minimal code sample taken from your question with the pattern that I've used:
'use strict';
var gulp = require('gulp');
var jade = require('gulp-jade');
var livereload = require('gulp-livereload');
var sources = {
jade: "jade/**/*.jade"
};
var destinations = {
html: "dist/"
};
// Compile and copy Jade
gulp.task("jade", function() {
return gulp.src(sources.jade)
.pipe(jade({pretty: true}))
.pipe(gulp.dest(destinations.html));
});
gulp.task('refresh', function() { return livereload.reload(); });
// execute task, then when finished, refresh
gulp.task("watch-jade", ["jade"], function() { return gulp.start('refresh'); });
gulp.task("watch", function() {
livereload.listen();
gulp.watch(sources.jade, ["watch-jade"]);
});

Categories