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

Getting Libsass Gulp Susy to work together
Gulp compass without config.rb
gulp-webserver: Default to index.html if available, else show directories
gulp-uglify notify on failing build
Declaring optional dependencies
gulp html minification error
Can an IIFE be added to a browserify bundle?
Gulp: Error Messages and Notifications with Plumber
Gulp - gulp-load-plugins not working
How to configure Gulp task to copy bower resources
gulp-jscs doesn't output anything when used in gulp-watch pipeline
ES6 project does not compile because modules not found
Gulp - can't set multiple relative destinations
Deploy a Yeoman Application With Gulp
Gulp-Inject Positions
Fail subsequent gulp tasks if first task fails

Categories

HOME
kendo-ui
mysqli
pandoc
msbi
confluence-rest-api
perl6
autocad
scapy
rmarkdown
angularjs-ng-repeat
normals
osclass
infopath
dat.gui
greensock
url-parameters
javaagents
ecmascript-2017
gsuite
datastax-enterprise
jira-zephyr
smart-device
utc
hierarchical-data
javapns
paper-trail-gem
tikz
microstrategy
fastadapter
bootcamp
perf
device-driver
stochastic-process
matrix-multiplication
mockserver
file-conversion
susy
contenteditable
evaluation
cloudconvert
ear
totalview
wicketstuff
qt3d
google-scholar
init
calc
code-translation
alchemy
std
google-app-engine-php
web-performance
magnet-uri
javapackager
traminer
jsoncpp
euro
nfa
bungeecord
optimistic-locking
growl
breeze-sharp
pnunit
visual-studio-setup-proje
smartxls
sigma-grid-control
tlbimp
octokit
playing-cards
removeall
nx
algol
openafs
expresso-store
custom-cursor
aspmenu-control
filedialog
nsundomanager
execjs
backlight
helios
expander
vista64

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