How to Pass a Flag to Gulp to Have It Run Tasks in Different Ways

Is it possible to pass a flag to Gulp to have it run tasks in different ways?

Gulp doesn't offer any kind of util for that, but you can use one of the many command args parsers. I like yargs. Should be:

var argv = require('yargs').argv;

gulp.task('my-task', function() {
return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
.pipe(sass({style:'nested'}))
.pipe(autoprefixer('last 10 version'))
.pipe(concat('style.css'))
.pipe(gulp.dest(options.SCSS_DEST));
});

You can also combine it with gulp-if to conditionally pipe the stream, very useful for dev vs. prod building:

var argv = require('yargs').argv,
gulpif = require('gulp-if'),
rename = require('gulp-rename'),
uglify = require('gulp-uglify');

gulp.task('my-js-task', function() {
gulp.src('src/**/*.js')
.pipe(concat('out.js'))
.pipe(gulpif(argv.production, uglify()))
.pipe(gulpif(argv.production, rename({suffix: '.min'})))
.pipe(gulp.dest('dist/'));
});

And call with gulp my-js-task or gulp my-js-task --production.

Pass Parameter to Gulp Task

It's a feature programs cannot stay without. You can try yargs.

npm install --save-dev yargs

You can use it like this:

gulp mytask --production --test 1234

In the code, for example:

var argv = require('yargs').argv;
var isProduction = (argv.production === undefined) ? false : true;

For your understanding:

> gulp watch
console.log(argv.production === undefined); <-- true
console.log(argv.test === undefined); <-- true

> gulp watch --production
console.log(argv.production === undefined); <-- false
console.log(argv.production); <-- true
console.log(argv.test === undefined); <-- true
console.log(argv.test); <-- undefined

> gulp watch --production --test 1234
console.log(argv.production === undefined); <-- false
console.log(argv.production); <-- true
console.log(argv.test === undefined); <-- false
console.log(argv.test); <-- 1234

Hope you can take it from here.

There's another plugin that you can use, minimist. There's another post where there's good examples for both yargs and minimist: (Is it possible to pass a flag to Gulp to have it run tasks in different ways?)

Pass parameter to Gulp task in gulpfile.js (not command-line)

I found out there is an on change event for gulp watch. So this might be what you're looking for:

var pagesDir = 'sass/pages/';

gulp.task('watch_pages', function() {
gulp.watch(pagesDir + '**/*')
.on("change", function(file) {
// absolute path to folder that needs watching
var changedDest = path.join(__dirname, pagesDir);
// relative path to changed file
var changedFile = path.relative(changedDest, file.path);
// split the relative path, get the specific folder with changes
var pageFolder = changedFile.split('\\')[0];

gulp.src(path.join(pagesDir, pageFolder) +'/**/*.scss')
.pipe(plumber(plumberErrorHandler))
.pipe(sass(...))
.pipe(gulp.dest('css/pages/' + pageFolder));

console.log(changedDest);
console.log(changedFile);
console.log(pageFolder);
});
});

Also, this way you don't need to declare the folder variables. If you add directories within the path being watched, it should pick it up and name the destination folder accordingly.

Theoretically the gulp task to compile sass should work within the watch task. I played around with the paths, and it seems to spitting them out. Let me know what happens, I can modify if necessary.

The required packages:

var gulp = require("gulp"),
path = require("path"),
rimraf = require("rimraf");

BTW, since you already have access to the file path, you can perhaps target the specific scss file instead of the whole directory.

Passing a string as a parameter to a gulp task

You may consider using yargs

reference: https://www.npmjs.com/package/yargs

In your gulpfile
var args = require('yargs').argv;

In your command line
$ gulp taskName --yourparamvariable=bar

To access the paramerter you've sent from your command line
args.yourparamvariable

how do I run a gulp task from two or more other tasks and pass the pipe through

One important thing in Gulp is not to duplicate pipelines. If you want to process your stylus files, it has to be the one and only stylus pipe. If you want to execute different steps in your pipe however, you have multiple choices. One that I would suggest would be a noop() function in conjunction with a selection function:

var through = require('through2'); // Gulp's stream engine

/** creates an empty pipeline step **/
function noop() {
return through.obj();
}

/** the isProd variable denotes if we are in
production mode. If so, we execute the task.
If not, we pass it through an empty step
**/
function prod(task) {
if(isProd) {
return task;
} else {
return noop();
}
}

gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(stylus())
.pipe(prod(minifyCss())) // We just minify in production mode
.pipe(gulp.dest(path.whatever))
})

As for the incremental builds (building just the changed files with every iteration), the best way would be to get on the gulp-cached plugin:

var cached = require('gulp-cached');

gulp.task('stylus', function() {
return gulp.src(path.styles)
.pipe(cached('styles')) // we just pass through the files that have changed
.pipe(stylus())
.pipe(prod(minifyCss()))
.pipe(gulp.dest(path.whatever))
})

This plugin will check if the contents have changed with each iteration you have done.

I spend a whole chapter on Gulp for different environments in my book, and I found those to be the most suitable ones. For more information on incremental builds, you can also check on my article on that (includes Gulp4): http://fettblog.eu/gulp-4-incremental-builds/



Related Topics



Leave a reply



Submit