I have the following code in my gulpfile
gulp.task('scripts', function () {
gulp.src(paths.browserify)
.pipe(browserify())
.pipe(gulp.dest('./build/js'))
.pipe(refresh(server));
});
gulp.task('lint', function () {
gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('nodemon', function () {
nodemon({
script: 'app.js'
});
});
I need to run the scripts and lint tasks when Nodemon restarts.I have the following
gulp.task('nodemon', function () {
nodemon({
script: 'app.js'
}).on('restart', function () {
gulp.run(['scripts', 'lint']);
});
});
Gulp.run() is now deprecated, so how would I achieve the above using gulp and best practices?
gulp-nodemon documentation states that you can do it directly, passing an array of tasks to execute:
nodemon({script: 'app.js'}).on('restart', ['scripts', 'lint']);
See doc here
UPDATE, as the author of gulp-nodemon uses run as well:
Idea #1, use functions:
var browserifier = function () {
gulp.src(paths.browserify)
.pipe(browserify())
.pipe(gulp.dest('./build/js'))
.pipe(refresh(server));
});
gulp.task('scripts', browserifier);
var linter = function () {
gulp.src(paths.js)
.pipe(jshint())
.pipe(jshint.reporter(stylish));
});
gulp.task('lint', linter);
nodemon({script: 'app.js'}).on('restart', function(){
linter();
browserifier();
});
If you can, use Mangled Deutz's suggestion about using functions. That's the best, most guaranteed way to make sure this works now and going forward.
However, functions won't help if you need to run dependent tasks or a series of tasks. I wrote run-sequence to fix this. It doesn't rely on gulp.run, and it's able to run a bunch of tasks in order.
Related
guys how to run another function in task before run main task? AS u can see in function have stream, and i know about syntax (gulp.task('task', ['tast'], func... ) But i dont want to see 999 tasks in list, thats why im trying to use functions for tasks
function cssBuild() {
var dt = gulp
.src('app/html-dev/styl/framework/style.styl')
.pipe(plumber({ errorHandler: onError }))
.pipe(stylus({ use: nib(), 'include css': true, import: ['nib'], compress: false }))
.pipe(gulp.dest('app/cache/css'))
.pipe(browserSync.stream());
return dt;
}
function htmlBuild() {
var dt = gulp
.src('app/html-dev/**/*.pug')
.pipe(plumber({ errorHandler: onError }))
.pipe(pug({
pretty: true
}))
.pipe(gulp.dest('app/cache'))
.pipe(browserSync.stream());
return dt;
}
gulp.task('build', function() {
var removeDist = del.sync('app/dist');
cssBuild();
htmlBuild();
jsBuild();
return merge (
gulp
.src('app/cache/css/*.css')
.pipe(cssnano())
.pipe(gulp.dest('app/dist/css')),
gulp
.src(['app/html-dev/img/**/*', '!app/html-dev/img/empty.jpg'])
.pipe(gulp.dest('app/dist/img')),
gulp
.src(["app/html-dev/fonts/**/*", '!app/html-dev/fonts/empty.woff'])
.pipe(gulp.dest('app/dist/fonts')),
gulp
.src("app/cache/js/**/*")
.pipe(gulp.dest('app/dist/js')),
gulp
.src("app/cache/*.html")
.pipe(gulp.dest('app/dist'))
);
});
The problem you are probably running into is that the tasks aren't necessarily synchronous, so you need to treat them appropriately (i.e., wait for them to complete).
It's probably better to use gulp as it is intended and to have several separate tasks (or ditch gulp entirely and just script something normally). Trying to half use gulp is only going to cause you headaches.
If you are worried about having one massive gulp task list, what you can do instead is group tasks together and then call them.
For example:
gulp.task('html', () => { /* do something */ });
gulp.task('css', () => { /* do something */ });
gulp.task('js', () => { /* do something */ });
gulp.task('clean', () => { /* do something */ });
// Group the build ones into one call
gulp.task('build', ['html', 'css', 'js']);
// Group the default into one
gulp.task('default', ['clean', 'build']);
By grouping them together, you can keep them nice and organized without having to have 100 things in one task. This also lets the benefits of gulp show.
I'm trying to setup a some Gulp tasks. I want to concatenate some JS files, minify them to create 1 JS file, but I want this done each time a change has been made in the original JS files but I can't seem to get the 'watch' task running properly
This is my Gulpfile.js
gulp.task('minify', ['watch', 'scripts'], function(){
gulp.src('themes/corp-fluid/js/dist/**/*.js')
.pipe(minify({
ext:{
src:'-debug.js',
min:'.js'
},
ignoreFiles: ['-min.js']
}))
.pipe(gulp.dest('themes/corp-fluid/js/dist'));
});
gulp.task('scripts', function(){
return gulp.src(['themes/corp-fluid/js/slick.js', 'themes/corp-fluid/js/functions.js'])
.pipe(concat('main.js'))
.pipe(gulp.dest('themes/corp-fluid/js/dist'));
});
gulp.task('watch', function(){
gulp.watch('themes/corp-fluid/js/**/*.js');
});
A couple of things. You need to call something in your
'watch' task, so
gulp.task('watch', function(){
gulp.watch('themes/corp-fluid/js/**/*.js', ['minify']);
});
and simplify the first line of your 'minify' task to
gulp.task('minify', ['scripts'], function(){
you don't need to call the 'watch' task again there. And finally you would be running the whole thing with
gulp watch
Gulpfile with sass, js concat, minify, and watch task.
You need change proxy domain name to yor domain name in browser-sync task, and change array of files in concat_js task.
var gulp = require('gulp')
var browserSync = require('browser-sync')
var sass = require('gulp-sass')
var concat = require('gulp-concat');
var minify = require('gulp-minify');
//Sass
gulp.task('sass', function () {
return gulp.src('app/sass/**/*.scss')
.pipe(sass())
// pipe(gulp.dest('app/css'))
.pipe(gulp.dest('app/css/'))
});
//browser reload
gulp.task('browser-sync', function () {
browserSync({
notify: false,
proxy: "http://front-end" //Your domain name
});
});
//concat
gulp.task('concat_js', function() {
//An array of files is required for the correct order of contact
return gulp.src(['app/js/_helpers.js',
'app/js/_cookie_notice.js']) //file array need for
.pipe(concat('all.js'))
.pipe(minify({
ext:{
src:'',
min:'.min.js'
},
noSource: true}))
.pipe(gulp.dest('app/js/'));
});
//watch
gulp.task('watch', ['browser-sync', 'sass'], function () {
gulp.watch('app/sass/**/*.scss', ['sass']);
gulp.watch('app/js/*.js', ['concat_js']);
gulp.watch('app/**/*.*', browserSync.reload);
});
gulp.task('default', ['watch', 'sass', 'concat_js']);
Note: An array of files in task concat_js is required for the correct order of file contact.
I have an issue with gulp.watch.
TLDR:
How to tell gulp.watch to wait until necessary tasks will not be finished before running new cycle?
Reasons:
I have three tasks: clean, build, and watch.
Task clean deletes directory, task build produces files in the same directory (clean is dependency for build).
Task watch runs gulp.watch on directory and then it runs build (that runs clean).
But sometimes watch task runs new build before previous build is finished and an error occurs: build continues write to directory and clean tries to remove directory (of course, ENOTEMPTY error happens).
This issue happens when I run gulp watch command.
My Gulpfile.js:
var gulp = require('gulp');
var ts = require('gulp-typescript');
var tslint = require('gulp-tslint');
var rename = require('gulp-rename');
var del = require('del');
var tsProject = ts.createProject('tsconfig.json');
var tsSources = ['app/**/*.ts', 'app/**/*.tsx'];
gulp.task('clean', function() {
return del(['built']);
});
gulp.task('build', ['clean'], function() {
return gulp.src(tsSources)
.pipe(ts(tsProject)).js
.pipe(rename({extname: '.js'}))
.pipe(gulp.dest('built'));
});
gulp.task('tslint', ['clean'], function() {
return gulp.src(tsSources)
.pipe(tslint())
.pipe(tslint.report('msbuild', {
emitError: false,
summarizeFailureOutput: false
}));
});
gulp.task('watch', ['build', 'tslint'], function() {
return gulp.watch(tsProject.config.filesGlob, ['build', 'tslint']);
});
gulp.task('default', ['build', 'tslint']);
For cleaning the gulp use following code:-
gulp.task('clean', function() {
del.sync([
path.join(__dirname, builtPath, '**/*.js'),
], {
force: true
});
});
Running into a bizarre bug when trying to make modular gulp tasks by splitting them into separate files. The following should execute the task css, but does not:
File: watch.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', ['css']); // PROBLEM
});
Declaring ['css'] in plugins.watch() should technically run the following task next:
File: css.js
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
gulp.task('css', function () {
return gulp.src('assets/styl/*.styl')
.pipe(plugins.stylus())
.pipe(gulp.dest('/assets/css'));
});
File: gulpfile.js
var gulp = require('gulp');
var requireDir = require('require-dir');
requireDir('./gulp/tasks', { recurse: true });
gulp.task('develop', ['css', 'watch']);
Folder structure
- gulp/
- tasks/
- css.js
- watch.js
- gulpfile.js
Expected behavior
gulp develop should run tasks css and watch (it does). On file changes, watch should detect them (it does) and then run the css task (it's does not).
One solution
Not terribly fond of this solution as gulp.start() is being deprecated in the next release, but this does fix it:
File: watch.js
plugins.watch('assets/styl/**/*.styl', function() {
gulp.start('css');
});
Either use gulp's builtin watch with this syntax:
gulp.task('watch', function () {
gulp.watch('assets/styl/**/*.styl', ['css']);
});
Or gulp-watch plugin with this syntax:
gulp.task('watch', function () {
plugins.watch('assets/styl/**/*.styl', function (files, cb) {
gulp.start('css', cb);
});
});
There's also probably a typo in your gulp.dest path. Change it to relative:
.pipe(gulp.dest('assets/css'));
I am using Gulp 4, where gulp.start() is deprecated
So here's the solution
gulp.task('watch', gulp.series('some-task-name', function () {
browserSync.init({
server: {
baseDir: config.distFolder + ''
}
});
var watcher = gulp.watch([
'./src/views/*.html',
'./src/index.html',
'./src/assets/css/*.css',
'./src/**/*.js'],
gulp.series('some-task-name'));
watcher.on('change', async function (path, stats) {
console.log('you changed the code');
browserSync.notify("Compiling, please wait!");
browserSync.reload();
})
}));
Now, whenever there is a change in my code, my "some-task-name" gets executed and then the browser page is reloaded. I don't need to delay my browser-sync at all.
I have a set of gulp.js targets for running my mocha tests that work like a charm running through gulp-mocha. Question: how do I debug my mocha tests running through gulp? I would like to use something like node-inspector to set break points in my src and test files to see what's going on. I am already able to accomplish this by calling node directly:
node --debug-brk node_modules/gulp/bin/gulp.js test
But I'd prefer a gulp target that wraps this for me, e.g.:
gulp.task('test-debug', 'Run unit tests in debug mode', function (cb) {
// todo?
});
Ideas? I want to avoid a bash script or some other separate file since I'm trying to create a reusable gulpfile with targets that are usable by someone who doesn't know gulp.
Here is my current gulpfile.js
// gulpfile.js
var gulp = require('gulp'),
mocha = require('gulp-mocha'),
gutil = require('gulp-util'),
help = require('gulp-help');
help(gulp); // add help messages to targets
var exitCode = 0;
// kill process on failure
process.on('exit', function () {
process.nextTick(function () {
var msg = "gulp '" + gulp.seq + "' failed";
console.log(gutil.colors.red(msg));
process.exit(exitCode);
});
});
function testErrorHandler(err) {
gutil.beep();
gutil.log(err.message);
exitCode = 1;
}
gulp.task('test', 'Run unit tests and exit on failure', function () {
return gulp.src('./lib/*/test/**/*.js')
.pipe(mocha({
reporter: 'dot'
}))
.on('error', function (err) {
testErrorHandler(err);
process.emit('exit');
});
});
gulp.task('test-watch', 'Run unit tests', function (cb) {
return gulp.src('./lib/*/test/**/*.js')
.pipe(mocha({
reporter: 'min',
G: true
}))
.on('error', testErrorHandler);
});
gulp.task('watch', 'Watch files and run tests on change', function () {
gulp.watch('./lib/**/*.js', ['test-watch']);
});
With some guidance from #BrianGlaz I came up with the following task. Ends up being rather simple. Plus it pipes all output to the parent's stdout so I don't have to handle stdout.on manually:
// Run all unit tests in debug mode
gulp.task('test-debug', function () {
var spawn = require('child_process').spawn;
spawn('node', [
'--debug-brk',
path.join(__dirname, 'node_modules/gulp/bin/gulp.js'),
'test'
], { stdio: 'inherit' });
});
You can use Node's Child Process class to run command line commands from within a node app. In your case I would recommend childprocess.spawn(). It acts as an event emitter so you can subscribe to data to retrieve output from stdout. In terms of using this from within gulp, some work would probably need to be done to return a stream that could be piped to another gulp task.