I have about six Gulp tasks which are similar to this:
gulp.task('scripts', function() {
return gulp.src([
'public_html/assets/plugins/zeroclipboard/ZeroClipboard.min.js',
'public_html/assets/plugins/redactor/redactor.min.js',
'public_html/assets/libraries/autobahn.min.js'
])
.pipe(concat('localStatic.js'))
.pipe(gulp.dest('public_html/assets/dist/js/'))
.pipe(rename('localStatic.min.js'))
.pipe(uglify())
.pipe(gulp.dest('public_html/assets/dist/js'));
});
When I run gulp in the terminal, it only executes the last task (or at least, only the JS files from the last task are generated).
Multiple tasks are allowed in Gulp, right? Why would only the last task in the file be executed?
You can run multiple tasks at the same time yes, provided they have different names.
gulp.task('name', function() {})
gulp.task('of', function() {})
// ... task definitions
gulp.task('default', ['name', 'of', 'the', 'tasks', 'you', 'want', 'to','run']);
This will run all the tasks specified in parallel when you run the gulp command.
You can read more about task dependencies in the docs
Related
Basic question but i just cannot find answer yet.
var gulp = require('gulp');
gulp.task('one', function(cb) {
// do stuff -- async or otherwise
cb(err);
});
gulp.task('two', function(cb) {
// do something
cb(err)
});
gulp.task('three', function(cb) {
// do something
cb(err)
});
The Q is: does task 2 only runs when task 1 finishes, task 3 only runs when task 2 finishes ?
With just this setup, only one task will be executed at all, e.g. task two if you invoke gulp two.
You can create composite tasks with the help of the functions series(...) and parallel(...) provided by Gulp. The new task will run the tasks passed to the function either in sequence or in parallel. Calls to the functions can be nested to create more complex scenarios.
I am using yii2 to build a web service. And to help me to put together all the things I use gulp. I have a file structure similar to this
gulpfile.js
index.php
basics/
-composer.json
-vendor/
after you get all the dependencies using composer they save into vendor folder. The problem is that for some reason yii2 saves bower asset in a folder called bower-asset, but it will only work if the folder is called bower. So I wrote these two tasks to help me with this. task one copies the content of bower-asset folder into bower folder in the same directory and the second task deletes bower-asset folder. My problem occurs when task two is ran from default task. Then it returns an error like this
[15:11:20] Starting 'bower-del'...
events.js:85
throw er; // Unhandled 'error' event
^
Error: ENOENT, lstat '/Users/Me/Documents/mamp/dumb/game/basic/vendor/bower-asset/jquery/dist'
at Error (native)
It also appears if I try to tell task to to wait for task one to be finished before task two starts like
gulp.task('bower-del', ['bower-copy'], function () {
The thing that surprises me the most is that if I run task two by itself ie gulp bower-del it deletes the folder no problem.
I have taken other tasks from my gulp file for simplicity purposes.
This is what my gulp tasks look like:
// Copies bower-asset into bower folder
gulp.task('bower-copy', function(){
gulp.src('./basic/vendor/bower-asset/**/*')
.pipe(gulp.dest('basic/vendor/bower/'));
});
// Deletes old bower-asset folder
gulp.task('bower-del', function () {
return gulp.src('./basic/vendor/bower-asset/', {read: false})
.pipe(clean());
});
gulp.task('default', ['bower-copy', 'bower-del']);
You should run de bower-del in sequence. In my SkeletonSpa I have the same issue with cleaning before a build. Here I have 2 tasks clean and build, where the build task should only run when the clean task is finished, eg. they should not run in parallel.
My implementation is as follows:
gulp.task('build', (cb) => {
let runSequence = require('run-sequence');
runSequence('clean', ['info', 'styles', 'scripts', 'images', 'copy'], 'todo', cb);
});
gulp.task('clean', ['clear-cache'], () => {
let del = require('del');
let vinylPaths = require('vinyl-paths');
return gulp.src([settings.dist, settings.reports])
.pipe(vinylPaths(del));
});
This will do the trick. Just take a look at the run-sequence plugin and implement it ;-)
I am new to gulp.
I have written two task that need to be performed. When I run them separately, they work fine. But when I combine them, the "replace" does not work.
gulp.task('bundle-source', function () {
return bundler.bundle(config);
});
gulp.task('bundle-config', function(){
return gulp.src(['config.js'])
.pipe(replace('src/*', 'dist/*'))
.pipe(gulp.dest(''));
});
gulp.task('bundle', ['bundle-config', 'bundle-source']);
I think the issue is that they both manipulate config.js. I think the second task when it saves to disk overwrites the change the first one made. The second task is about 30 seconds.
Gulp tasks are run in parallel by default. So if your tasks are working on the same files, they might step on each others' toes indeed.
You can use gulp's tasks dependencies to have them run one after the other. So if bundle-config should be run before bundle-source :
gulp.task('bundle-source', ['bundle-config'], function () {
return bundler.bundle(config);
});
You can also use a package like run-sequence if you need them to run one after the other :
var seq = require('run-sequence');
gulp.task('bundle', function(cb) {
return seq('bundle-config', 'bundle-source', cb);
});
Finally, You could use gulp 4, which has a built-in mechanism to run tasks in series.
I have a gulpfile in which is a watch task, below
gulp.task('watch', function() {
gulp.watch('template/slick/assets/less/*.less', ['less']); // Watch all the .less files, then run the less task
});
This then invokes a less compile to css of that directory and moves it to a /css/ folder.
I then have 2 other tasks already scripted up to min, concat and move these .css files to a dist folder.
What I need to know is that when my watch invoked less task completes can I notify/run the stylesmin, cssconcats tasks? I do need to add more code to do it. I can't see to find a decent notify/end style way of doing things.
Here's the less task which is invoked by watch
gulp.task('less', function () {
return gulp.src('game/http/template/slick/assets/less/*.less')
.pipe(less())
.pipe(gulp.dest('game/http/template/slick/assets/css/'))
.pipe(notify({message: 'Less compiled'}));
});
You can define your tasks as dependencies of each other with [] syntax like below. (I'm assuming you are using something like connect to start up a server before you start watching the files)
gulp.task('less', function() {
console.log('less');
})
gulp.task('stylesmin', ['less'], function() {
console.log('stylesmin');
})
gulp.task('cssconcats', ['stylesmin'], function() {
console.log('cssconcats');
})
gulp.task('test', ['connect', 'watch']);
Modify your watch to kick off the last task, cssconcats and gulp will run the dependencies first
gulp.task('watch', function() {
gulp.watch('template/slick/assets/less/*.less', ['cssconcats']); // Watch all the .less files, then run the less task
});
Change any .less file and the output shows that the tasks are run correctly in this order;
less, stylesmin, cssconcats
I have a very minimal gulpfile as follows, with a watch task registered:
var gulp = require("gulp");
var jshint = require("gulp-jshint");
gulp.task("lint", function() {
gulp.src("app/assets/**/*.js")
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
gulp.task('watch', function() {
gulp.watch("app/assets/**/*.js", ["lint"]);
});
I cannot get the watch task to run continuously. As soon as I run gulp watch, it terminates immediately.
I've cleared my npm cache, reinstalled dependencies etc, but no dice.
$ gulp watch
[gulp] Using gulpfile gulpfile.js
[gulp] Starting 'watch'...
[gulp] Finished 'watch' after 23 ms
It's not exiting, per se, it's running the task synchronously.
You need to return the stream from the lint task, otherwise gulp doesn't know when that task has completed.
gulp.task("lint", function() {
return gulp.src("./src/*.js")
^^^^^^
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
Also, you might not want to use gulp.watch and a task for this sort of watch. It probably makes more sense to use the gulp-watch plugin so you can only process changed files, sort of like this:
var watch = require('gulp-watch');
gulp.task('watch', function() {
watch({glob: "app/assets/**/*.js"})
.pipe(jshint())
.pipe(jshint.reporter("default"));
});
This task will not only lint when a file changes, but also any new files that are added will be linted as well.
To add to OverZealous' answer which is correct.
gulp.watch now allows you to pass a string array as the callback so you can have two separate tasks. For example, hint:watch and 'hint'.
You can then do something like the following.
gulp.task('hint', function(event){
return gulp.src(sources.hint)
.pipe(plumber())
.pipe(hint())
.pipe(jshint.reporter("default"));
})
gulp.task('hint:watch', function(event) {
gulp.watch(sources.hint, ['hint']);
})
This is only an example though and ideally you'd define this to run on say a concatted dist file.