If you have a task that starts and finishes, that needs to be run every time files change, that well documented here https://gulpjs.com/docs/en/getting-started/watching-files
const { watch } = require('gulp');
exports.default = function() {
// The task will be executed upon startup
watch('src/*.js', { ignoreInitial: false }, function(cb) {
// body omitted
cb();
});
};
But is there a way to use gulp watch like nodemon? Where you leave a task running, and then stop and start it whenever a file on the watchlist is changed?
--- more ---
was asked for some examples, so here are some examples that will not work
the problem is that I don't know how to set it up so that it stops the existing server whenever the watch is triggered.
---- example #1 - run server in process -----
exports.default = function() {
watch('src/*.js', { ignoreInitial: false }, function(cb) {
// this will call back but when the watch is triggered again
// it will try to start another instance
app.listen(3000, cb);
});
};
---- example #2 - run server in its own process process -----
exports.default = function() {
watch('src/*.js', { ignoreInitial: false }, function(cb) {
const proc = spawn('node', ['server.js']);
proc.stdout.pipe(process.stdout);
proc.stderr.pipe(process.stderr);
// this will never call the call back
// so never complete
cb();
});
};
Well, at least you can do like that:
% gulp someTask >/dev/null 2>&1 &
[1] _pid_
And your gulp task will run indefinitely if it's a task like watch.
But this approach is very dirty. You should use something like nodemon to achieve that.
Related
I have read online that 'run-sequence' will make sure all specified tasks will run synchronously. For some reason this is not true in my case. Am I missing something?
'convertSassToCss' is the task that does not work as intended
If I would run tasks 'cleanAllCss' and 'convertSassToCss' seperatelly, it would work.
The idea here is to first remove all css files from directory, then convert all sass files into css and place the into the cleaned dir
/// <binding BeforeBuild='clean, min:css' Clean='clean' />
"use strict";
var gulp = require("gulp"),
rimraf = require("rimraf"),
concat = require("gulp-concat"),
cssmin = require("gulp-cssmin"),
uglify = require("gulp-uglify"),
sass = require('gulp-sass'),
rename = require('gulp-rename'),
del = require('del'),
runSequence = require('run-sequence');
var paths = {
webroot: "./wwwroot/"
};
paths.cssPath = paths.webroot + "css/*.css";
paths.cssOutputPath = paths.webroot + "css";
//sass
paths.sassPath = paths.webroot + "sass/**/*.scss";
paths.sassOutputPath = paths.webroot + "./css/file";
gulp.task("cleanAllCss", function (cb) {
console.log("2 -- Removing all CSS files");
del([paths.cssOutputPath + "/*.css"], cb);
console.log("2 -- DONE - Removed all css files");
});
gulp.task("convertSassToCss", function (cb) {
console.log("3 -- Converting all SASS files into corresponding CSS");
gulp.src(paths.sassPath)
.pipe(sass())
.pipe(gulp.dest(paths.cssOutputPath));
console.log("3 -- DONE - Converting all SASS files into corresponding CSS");
});
//not working, should run in sequence
gulp.task("convertAllSassIntoCssMin", function (callback) {
console.log("1 -- Converting all SASS files into corresponding min CSS files")
runSequence('cleanAllCss', 'convertSassToCss', callback);
console.log("1 -- DONE - Converting all SASS files into corresponding min CSS files")
});
I cannot speak to run-sequence as I haven't used it before.
However, you can run tasks in sequence by using Gulp's task dependency feature, where a task will NOT run until it's dependencies have finished running.
Your new tasks signatures
cleanAllCss stays the same:
gulp.task("cleanAllCss", function (cb) { ... }
convertSassToCss changes to:
gulp.task("convertSassToCss", ['cleanAllCss'], function (cb) { ... }
convertAllSassIntoCssMin changes to:
gulp.task("convertAllSassIntoCssMin", ['convertSassToCss'], function (cb) { ... }
This ensures that convertAllSassIntoCssMin won't run until convertSassToCss has finished which in turn won't run until cleanAllCss has finished.
Refer to gulp deps:
deps
Type: Array
An array of tasks to be executed and completed before your task will
run.
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// Do stuff }); Note: Are your tasks running before the dependencies
are complete? Make sure your dependency tasks are correctly using the
async run hints: take in a callback or return a promise or event
stream.
You can also omit the function if you only want to run a bundle of
dependency tasks:
gulp.task('build', ['array', 'of', 'task', 'names']); Note: The tasks
will run in parallel (all at once), so don't assume that the tasks
will start/finish in order.
The problem is in the cleanAllCss task. The second parameter accepted by del is options, not the callback which you're trying to pass. The callback is never executed. Try running it manually when the removal is finished.
gulp.task("cleanAllCss", function (cb) {
console.log("2 -- Removing all CSS files");
del([paths.cssOutputPath + "/*.css"]).then(paths => {
console.log("2 -- DONE - Removed all css files");
cb();
};
});
I have a Gulp task that uses glob-stream to recursively loop through directories and files to perform a task, similar to below, but far more elaborate:
var gs = require('glob-stream');
var config = {
PATH: 'some/path/*.*'
}
function doSomething(filePath) {
var stream = gs.create(filePath);
// Do something
return gs.on('data', doSomething);
}
gulp.task('compile', function() {
var filePath = config.PATH;
return doSomething(filePath);
});
I can have the task achieve the results and compile what I need, but unfortunately Gulp believes the task has finished while it's still running, causing issues in my build process - How can I avoid this? I'm already using run-sequence but to no effect.
Why are you manually walking the directory tree with a recursive function? Why not just let glob-stream do the work for you? Then you only have to take care of the //Do something part:
var config = {
PATH: 'some/path/**' //glob pattern for all subfolder and files
};
function doSomething(filePath) {
//Do something
}
gulp.task('compile', function() {
var stream = gs.create(config.PATH);
stream.on('data', doSomething);
return stream;
});
gulp.task('secondTask', function() {
console.log('secondTask');
});
gulp.task('default', function() {
runSequence('compile', 'secondTask');
});
The some/path/** glob pattern creates a stream of all folders and files below some/path/, so you don't have to implement the recursive tree walk yourself.
Note that the compile task returns the stream. Otherwise gulp can't tell when the compile task has completed and starts running secondTask before compile has finished.
I'm using the gulp-changed-in-place package to only run certain Gulp tasks with the files that have changed (https://github.com/alexgorbatchev/gulp-changed-in-place). I'm having an issue where I only want to run my linting and code style tasks on changed files to speed up development time.
My current setup is as follows:
var gulp = require('gulp');
var changedInPlace = require('gulp-changed-in-place');
var eslint = require('gulp-eslint');
var jscs = require('gulp-jscs');
var config = {
paths: {
js: './app/**/*.js'
}
}
gulp.task('jscs', function() {
return gulp.src(config.paths.js)
.pipe(changedInPlace())
.pipe(jscs())
.pipe(jscs.reporter())
.pipe(jscs.reporter('fail'));
});
gulp.task('lint', ['jscs'], function() {
return gulp.src(config.paths.js)
.pipe(changedInPlace())
.pipe(eslint())
.pipe(eslint.format())
.pipe(eslint.failAfterError());
});
gulp.task('js', ['lint'], function() {
// do some stuff
});
gulp.task('watch', function() {
gulp.watch(config.paths.js, ['js']);
});
The issue is probably pretty obvious. The js task has a dependency on the lint task which itself has a dependency on the jscs task - so the jscs task runs first. It accesses changedInPlace() which causes the cache to get updated and therefore the changedInPlace() call from the lint task doesn't think anything has changed and doesn't check the files I expect.
Has anyone used this package with this issue and do you have any suggestions on what to do? Also open to other ways of accomplishing the task - only running the js task on changed files.
I'm building a workflow with Gulp for handling e-mails and I'm having some trouble.
My gulp file compiles a jade file into html, and I then want to run another task on the html file that this task outputs. I have set it up like shown in the code below.
The problem is that, even though the console says that the 'emailBuilder' task is run, it's not doing anything. But if I run 'emailBuilder' separately after 'gulp build' it does do what it should.
Image shows that emailBuilder is run last, still doesn't do what it should.
How can I make this work smoothly?
//-----------------------------------------------------
// ### REQUIREMENTS
//-------------------
var gulp = require('gulp'),
jade = require('gulp-jade'),
sass = require('gulp-sass'),
del = require('del'),
emailBuilder = require('gulp-email-builder'),
runSequence = require('gulp-run-sequence');
//-----------------------------------------------------
// ### Clean
// `gulp clean`
//-------------------
// Clean our compiled folder before we generate new content into it
gulp.task('clean', function (cb) {
del([
// here we use a globbing pattern to match everything inside the `compiled` folder, except our gitkeep file
'compiled/**/*',
], { dot: true },
cb);
});
//-----------------------------------------------------
// ### Compile SCSS
// `gulp compile-css`
//-------------------
gulp.task('compile-scss', function () {
gulp.src('./src/scss/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./compiled/css'));
});
//-----------------------------------------------------
// ### Build Jade templates
// `gulp templates`
//-------------------
gulp.task('templates', function() {
var YOUR_LOCALS = {};
gulp.src('./src/templates/*.jade')
.pipe(jade({
pretty: true,
locals: YOUR_LOCALS
}))
.pipe(gulp.dest('./compiled/templates/'));
});
//-----------------------------------------------------
// ### Inline CSS, send tests
// `gulp compile-css`
//-------------------
gulp.task('emailBuilder', function() {
return gulp.src(['./compiled/templates/*.html'])
.pipe(emailBuilder())
.pipe(gulp.dest('./compiled/templates/'));
});
//-----------------------------------------------------
// ### Build
// `gulp build` - Clean up the builds directory and do a complete build.
//-------------------
gulp.task('build', function(callback) {
runSequence(
'clean',
'compile-scss',
'templates',
'emailBuilder',
callback);
});
You need to add a return statement to your tasks. According to the gulp API docs on tasks:
Make sure your dependency tasks are correctly using the async run hints: take in a callback or return a promise or event stream.
If you don't return a promise or the event stream (or use a callback) the following tasks won't know when the previous one is done.
I suspect that in your case the emailBuilder task is run too soon.
New to Gulp. My default task is using the pluginrun-sequence which tells task deleteBuild to run, then makeBuild.
Randomly, I am getting an ENOENT error which seems to be telling me that I'm either referencing files that don't exist for deletion or copy. My tasks are:
deleteBuild:
gulp.task('deleteBuild', function(done) {
var del = require('del');
del(['build/**/*'], done);
});
makeBuild:
gulp.task('makeBuild', function() {
var stream = gulp.src(['src/**/*'], { base: 'src/' })
.pipe(gulp.dest('build/');
});
Can someone inform me as to how to best address this issue? I'm hoping to seek a low-level understanding rather than to be shown a solution w/o an explanation. Thanks.
Aside: I tried the deleteBuild without a callback function as well, under the assumption that, as is, it would perform the deletion and only continue to the next task once it is complete, though this doesn't seem to be what is happening.
That's probably because the deleteBuild does not return a gulp stream and thus leave the pipe broken. I would propose the following:
gulp.task('deleteBuild', function() {
var del = require('del');
var vinylPaths = require('vinyl-paths');
return gulp.src(['build']) // no need for glob, just delete the build directory
.pipe(vinylPaths(del));
});
gulp.task('makeBuild', function() {
var stream = gulp.src(['src/**/*'], { base: 'src/' })
.pipe(gulp.dest('build/');
});
gulp.task('default', function(cb) {
var runSequence = require('run-sequence');
runSequence('deleteBuild', ['makeBuild'], cb);
});
These tasks will first delete the build directory before executing the makeBuild task.
You'll need to install one additional plugin:
npm install vinyl-paths
For a ready to use example, please take a look a the gulpfile of skeletonSPA. This works for me ;-)