gulp


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


This must be obvious but I can't find it. I want to preprocess my stylus/coffee files with a watcher in the dev environment and in production with a build task (isn't that common to all of us?) and also run a few more minification and uglification steps in production but I want to share the pipe steps common to both dev and production for DRY
The problem is that when I run the task which watches the files, the task which preprocesses does that to all the files since it has its own gulp.src statement which includes all stylus files.
How do I avoid compiling all files on watching while still keeping the compile task separate. Thanks
paths = {
jade: ['www/**/*.jade']
};
gulp.task('jade', function() {
return gulp.src(paths.jade).pipe(jade({
pretty: true
})).pipe(gulp.dest('www/')).pipe(browserSync.stream());
});
gulp.task('serve', ['jade', 'coffee'], function() {
browserSync.init({
server: './www'
});
watch(paths.jade, function() {
return gulp.start(['jade']);
});
return gulp.watch('www/**/*.coffee', ['coffee']);
});
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 Links

Can't Sprite using gulp.spritesmith
How can I make build variables available to all JS files in gulp?
Gulp not installed globally?
gulp-useref deep folders error
use gulp+browserify+reactify, can't emit exit when got a ReactifyError
gulp-browserstack and gulp-cucumber don't seem to play nicely together
Gulp - Babel - EcmaScript-6 - Redux / Unhandled stream error in pipe
Delete all files using gulp except once that match pattern
Gulp task 'inject:vendor' does not inject Bower dependencies
Why do you open a gulp src pipe when you use gulp-watch?
Atom action performed on save
Gulp BrowserSync not working with SCSS
run gulp-clean-css options in gulp-inline
Is it possible to run gulp tasks after linting?
How to male a snapshot/dump from gulp installation and settings?
My browsersync server refreshes the page but with old content

Categories

HOME
logging
itunesconnect
cors
android-ndk
file-upload
ibm
watson-iot
cryengine
qt4
webpack-dev-server
segmentation-fault
normals
facebook-sharer
chef-recipe
expo
yui
eclipse-orion
nsoperation
k-means
jquery-easyui
django-rest-auth
git-branch
multipart
chartist.js
my.cnf
inspec
expressionengine
setup-project
dynamics-ax-2012-r3
sphinx4
openoffice-impress
lines
opencsv
mplab
directions
ports
jsonapi-resources
machine-code
minitest
azure-storage-files
google-chrome-console
definition
libzip
servicebus
stream-socket-client
g77
nao-robot
emacs24
serialversionuid
appcmd
cancan
px4
playframework-2.3
playframework-1.x
programming-pearls
nsalert
zedgraph
node.js-client
acceleo
addressbook
joystick
qtruby
sprockets
vitamio
angular-i18n
paypal-subscriptions
alchemy
hana-sql-script
sqldataadapter
askbot
javapackager
tess4j
polarion
accpac
backtrace
fiware-health
dojox.grid
uiblureffect
fxmlloader
gnip
fscanf
step
mvcgrid
twitter-finagle
django-tests
power-management
iwork
vbaccelerator
ia-32
objectdatasource
angularjs-select2
wordbreaker
bho
mysql2
nsregularexpression
doxia
jquery-1.8
yii-cactiverecord
jqzoom
apache-commons-email
backlight
windows-xp-embedded
konsole
dynamic-scope
focus-stealing
scala-designer

Resources

Mobile Apps Dev
Database Users
javascript
java
csharp
php
android
MS Developer
developer works
python
ios
c
html
jquery
RDBMS discuss
Cloud Virtualization
Database Dev&Adm
javascript
java
csharp
php
python
android
jquery
ruby
ios
html
Mobile App
Mobile App
Mobile App