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

Gulp watch only runs once
Gulp watch not working with imported files but works with main file
Gulp watch for css doesn't work
Using gulp for compiling of changed files only
How to run gulp task in visual studio code?
BrowserSync with custom URL
Multi-tenancy and Semantic UI
Display total number of errors with Gulp Jshint
Gulp watch entire folder & compile saved file
elixir.queueTask is undefined
gulp : browserify then concat files
parse error on vinyl source stream on gulp browserify babelify project
Bitters error (“Undefined variable: $font-stack-system”)
Gulp Babel Issue Using Foundation
Can gulp-rev inside individual tasks merge into one manifest?
Angular2 “Getting Started” deployment with SystemJS

Categories

HOME
airflow
logging
url
network-programming
salesforce
gsm
qemu
python-requests
arcgis
boxplot
singleton
ms-access-2010
swap
collision-detection
theory
mongoimport
email-attachments
jinja2
aggregate
hql
exchange-transport-agents
bookmarklet
gpo
screen-scraping
aspxgridview
core-animation
priority-queue
smart-device
uibarbuttonitem
typeorm
spock
concrete5
traitsui
campaign-monitor
stencyl
instances
gem-fury
office-interop
keychain
mixed-models
compiled-query
cakephp-3.2
spring-ide
activeandroid
dcom
px4
zedgraph
iban
vertex-shader
firebase-polymer
foreground
konakart
normalisation
askbot
web-performance
bioconductor
producer-consumer
winforms-interop
azure-mobile-app
joomla3.3
tokudb
glog
maven-archetype
asp.net-2.0
data-quality-services
esri-arc-engine
nsq
crtdbg.h
quickfixn
conditional-comments
famous-engine
xts
winrun4j
html5-filesystem
adabas
xcode6.1-gm-seed
playing-cards
wordbreaker
ftpwebrequest
ntdll
boost.build
feincms
aspmenu-control
winrt-async
auto-compile
object-tag
netduino
virtual-destructor
iphone-maps
jquery-attributes
cstring

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