Gulp: Task Runner
32
Gulp : Task Runner For Node Fundamentals @ BCIT
-
Upload
christopher-bautista -
Category
Technology
-
view
100 -
download
1
Transcript of Gulp: Task Runner
Gulp : Task Runner
For Node Fundamentals @ BCIT
What is Gulp?
End
Uses
Install
Plugins
Features
Linting
Preprocessing
Asset Optimization
Prepare Distribution
TemplatingProject
Interpolation
Minify JS/CSS
? ?
?
?
?
LESS/SASS
Unit TestsCoffeescript
What is Gulp?●Build
system/Automation●Built in Javascript●Streams●Plugins
http://gulpjs.com
What is Gulp?
End
Uses
Install
Plugins
Features
What it’s good for?●Combine/Concatenate●Preprocessing SASS/LESS
Coffeescript etc.●Optimizing assets●Tests●Code changes triggered tasks●others via plugins
What is Gulp?
End
Uses
Install
Plugins
Features
---- install > npm install -g gulp > npm init
> npm install gulp --save-dev
----- configure > nano gulpfile.js ----- run > gulp
What is Gulp?
End
Uses
Install
Plugins
Features
Tasks
gulp.task('js', function () { ...
});
gulp.task('css', function () { ...
});
gulp.task('server', function () { ...
pipe(livereload());//browser reload
});
gulp.task('default', function () { ...
});
Source and Destination
webapp/├── build│ ├── images│ ├── css│ └── js│ └── vendor├── node_modules│ ├── gulp│ ├── gulp-concat│ ├── gulp-html-replace│ ├── gulp-notify│ ├── gulp-uglify│ └── gulp-uglifycss├── src│ ├── images│ ├── css│ └── js│ └── vendor├── package.json└── gulpfile.js
// process js files save to
build/js
gulp.task('js', function () {
return gulp.src('src/js/*.js')
.pipe(gulp.dest('build/js'));
});
Streams and Pipe
gulp.task('js', function () {
return gulp.src('js/*.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(uglify()) .pipe(concat('app.js')) .pipe(gulp.dest('build'));
});
Watch
gulp.task('setupJSWatch', function () {
gulp.watch('js/*.js', ['build']);
});
gulp.task('build', function () { ...
});
What is Gulp?
End
Uses
Install
Plugins
Features
----- add plugins > npm install gulp-[plugin] --save-
dev
... "devDependencies": { "gulp-concat": "^2.3.3",
"gulp-jshint": "^1.7.1", "gulp-rename": "^1.2.0", "gulp-sass": "^0.7.2", "gulp-uglify": "^0.3.1" }
> npm install --save-dev gulp-concat
concat
var concat = require(‘gulp-concat’);
gulp.task('js', function () {
return gulp.src('js/*.js') .pipe(concat('app.js'));
.pipe(gulp.dest('build'));
});
> npm install --save-dev gulp-uglify
uglify
var concat = require(‘gulp-uglify’);
gulp.task('js', function () {
return gulp.src('js/*.js') .pipe(concat('app.js'));
.pipe(uglify());
.pipe(gulp.dest('build'));
});
> npm install --save-dev browser-sync
browsersync
var browserSync= require(‘browser-sync’);
gulp.task('js-watch', ['js'],browserSync.reload);gulp.task('serve', ['js'], function () {
browserSync({ server: { baseDir: "./src/" },
port: 8080 });
// add browserSync.reload to the tasks array to make// all browsers reload after tasks are complete.gulp.watch("js/*.js", ['js-watch']);});
imagemingulp-coffee/sass/less
livereloadgulp-util
compress/decompressgulp-baseimg
other plugins
http://gulpjs.com/plugins/
What is Gulp?
Wrap up
Uses
Install
Plugins
Features
● Gulp is a build system to automate tedious, repetitive but very important tasks
● Tasks/Streams● Learn to use gulp.task, gulp.src,
gulp.dest and gulp.watch● Explore plugins
Wrap up
http://gulpjs.com
● References○ http://gulpjs.com○ http://www.smashingmagazine.com/2014/06
/11/building-with-gulp/○ http://www.browsersync.io/docs/gulp/○ https://www.npmjs.com/search?q=gulp○ https://github.com/yeoman/generator-gulp-w
ebapp
Gulp: Task Runner
