I have two requirements for my build script:
When I run gulp clean build, clean must complete before build
starts.
If I run gulp build, then clean shouldn't run.
So, if clean is specified, then build should wait for it, else start.
The first part is possible if I do
gulp.task('clean');
gulp.task('build', ['clean']);
However, that violates point 2
If I do
gulp.task('clean');
gulp.task('build');
That violates point 1
Is this possible with gulp?
You cannot run two gulp tasks with the same command like you did with dependency management you want.
Anyway you can pass an argument to your build task that will allow, using a little ternary, to wait for the clean one to complete before running.
So something like this:
gulp.task('build', (process.argv[3] === '--clean') ? ['clean'] : null, function () {
...
});
This way, you can launch your build normally with
gulp build
And when you want to call it with the clean:
gulp build --clean
There is a lot of ways to get better argument handling, like yargs or the env of gulp-util. But I found my method nice in the fact that it doesn't need any extra dependency.
Looks like you can use Gulp-If
gulp.task('build', function() {
gulp.src('*.*')
.pipe(gulpif(condition, clean()))
.pipe(gulp.dest('./dist'));
});
Related
I was already successful to automate my build commands inside the "tasks.json" file. But sadly "tasks.json" or vscode does not offer an option to set custom environment variables (which would be a really really really nice and needed feature).
I don't want to change a couple of lines just to specify the program which I want to build (there are a couple in this project). I was able to do a workaround and set an windows environment variable, but for this workaround I need to restart vscode if I change the environment variable.
Therefore I tried to use GULP-Task to start my build process, because with gulp task I set file global variables. I was already able to get my tasks running in gulp, but with gulp tasks I don't see the progress of my building task in the output sequentially, I just get the output when he is finished in a big "blop".
I tried a couple of things, like piping, writing to file (this worked sequentially), but the output on the output-window is still displayed as a "blop". Therefore I want to ask if it is possible to get an sequential output of my running task with gulp?
This is how I start my build task:
gulp.task('BuildDebug', function (cb) {
exec(buildCommand + debugCommand, function (error, stdout, stderr) {
console.log(stdout);
console.log(stderr);
});
});
I'm using gulp to convert markdown files to HTML, and using the gulp-watch plugin (not the gulp.watch API function) to rebuild files if they change. Works great!
gulp.task('markdown', function () {
gulp.src('src/**/*.md')
.pipe(watch('src/**/*.md'))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
});
The problem is that the pipeline src is the markdown files, but within the pipeline I also reference a template file. If that template changes, all the markdown files need to be rebuilt. Is there a way to express that dependency in gulp/gulp-watch?
I tried using gulp.watch (the API function) to watch the template and run the 'markdown' task if it changes ...
gulp.watch('templates/md.tpl', ['markdown']);
... but that didn't work. Nothing happens. I assume having gulp-watch in the pipeline prevents it from doing anything.
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Is there a better way?
I guess I could create a two tasks, one with gulp-watch and one without, and use the one without to force a full rebuild. I'd rather not, because then it becomes an ongoing problem to keep the two in sync.
Remember, gulp is just JavaScript.
Simply write a function that constructs the stream with or without the watch() step depending on a parameter that you pass. The gulp-if plugin let's you write something like this in a very concise way (although it's not necessary and could be done without it).
Here's how I would do it:
var gulpIf = require('gulp-if');
function processMarkdown(opts) {
gulp.src('src/**/*.md')
.pipe(gulpIf(opts.watch, watch('src/**/*.md')))
.pipe(markdown())
.pipe(template('templates/md.tpl'))
.pipe(gulp.dest('dist'));
}
gulp.task('markdown', function() {
processMarkdown({watch: true});
watch('templates/md.tpl', function() {
processMarkdown({watch: false});
});
});
You can specify gulp src as an array, too:
gulp.src(['src/**/*.md', 'templates/md.tpl'])
I have a gulp task that performs some pretty common tasks - it runs jshint to validate my code, then concats and minimizes the files and outputs them into single .min.js files.
The task (appears) to execute flawlessly when I run it manually. But the second I try to use it in a $gulp.watch it no longer outputs my file (it still executes and executes jshint though).
The code in my task:
gulp.src(path.join(workingPath, folder, '/*.js'))
.pipe(jshint())
.pipe(jshint.reporter(stylish))
.pipe(jshint.reporter('fail')) //stop build if errors found
.on('error', function() {
console.log("Please review and correct jshint errors.");
this.end();
})
.pipe(order([ //order files before concat - ensure module definitions are first
"*.module.js",
"*.js"
]))
.pipe(concat(filename+'.js'))
.pipe(gulp.dest(destinationPath)) //full combined version
.pipe(uglify())
.pipe(rename(filename+'.min.js'))
.pipe(gulp.dest(destinationPath)) //minified combined version
.on('error',function() {
console.log("An error occurred during Gulp processing.");
this.end();
});
My gulp watch (the task is named 'components'):
gulp.watch(componentsBasePath+"/**/*.js",['components']);
One thing that I've noticed though is at the end of the manual run I see "Process finished with exit code..". And if I kill my gulp.watch it outputs "Process finished with exit code.." - then it DOES creates the output files!
My goal is to have my 'components' task create those output files every time it is triggered by the watch - not just when I kill the watch.
Thank you!
Cliff
Ok so my hacky way to fix the problem with jetbrains (im using phpstorm), you gotta understand 2 things.
gulp watchers act on file save.
jetbrains will not auto update the project files (as you have found out it uses a cache).
To get around this problem i created a macro called saveSync which does the following actions:
Save all
Synchronize
Synchronize
Synchronize
Why did i synchronize 3 times? Because gulp takes a few seconds to finish tasks (compiling, etc) and if you update before they finish obviously the project view doesn't get update properly. I haven't figured out a way to insert a time delay into the macro itself.
After i created the macro, i just rebound ctrl + s from save all to the macro, and it worked.
If there is a 'cleaner' way of doing this i have yet to discover it.
Ran this by someone else and he found the cause of the issue. Though - it's not Gulp related at all it turns out.
The IDE I was using updated the folder and file structure instantly when I manually ran my 'components' task, however it did not do the same when I ran the gulp.watch task. I am happy to report though that the files were being created successfully, they just never appeared in the IDE until I killed the task.
The gulpfile.js I wrote is Common gulpfile.js.
In a build task, inject should inject all static files into html outputs, but it inject nothing in the clean build , I must run same command(here is gulp -p project build) twice(gulp -p project build && gulp -p project build) to inject them successful.
I have tried use run-sequence, it helps nothing.
Is this a bug?
Thanks :)
Your gulp tasks appear not to be returning their streams. If you do not return a stream from a task, then any other tasks that depend on it will not wait for the async behaviour to complete before running.
So more or less, what you're seeing is that you have two levels of things that have to happen: first your "script", "style", and "asset" tasks need to be completed, and then when everything's ready your "view" task can do its work. The first time you run it, all four tasks are run at nearly the same time (so "view" runs with old "asset" results, etc.)
To fix it, just return the working stream in each task:
gulp.task('style', ['check'], function () {
var less_filter = gulpFilter('**/*.less');
return gulp.src(path_current.src_path_style)
.pipe(less_filter)
// ... the rest of your pipes
.pipe(browserSync.reload({stream:true}));
});
I have the following code fragment in my gulpfile.
gulp.task('static', function() {
return gulp.src(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'])
.pipe(gulp.dest(outputDir + '/'))
});
gulp.task('watch', function() {
gulp.watch(['./src/**', '!./src/js/**', '!./src/js/', '!./src/scss/', '!./src/scss/**'], ['static']);
});
gulp.task('dev', ['static']);
gulp.task('default', ['watch', 'dev']);
If I run gulp dev, gulp watch or gulp static, everything works fine. However, if I run just gulp (default), it does the static task 5 times. Can anyone help me out with why this is happening?
P.S. The paths passed to watch are such because if I don't disclude the directories as separate paths, it seems to be copying the empty directories js and scss for some reason.
Probably because you're not returning the tasks, and you need them to be asyc.
See this: Gulp.js task, return on src?
and the docs (also linked in SO post above) https://github.com/gulpjs/gulp/blob/master/docs/API.md#async-task-support
Also, the dev task looks redundant in its current form - you may as well use the task static directly, unless you plan to bundle in more tasks with dev