FRONT-END WORKFLOW WITH GULP
Adrián Bolonio
Gulp is a javascript task runner that lets you automate tasks such as bundling, preprocessing and minifying files, libraries and stylesheets.
What is Gulp?
Gulp vs Grunt
"Gulp is a streaming build system".
Think Grunt, but faster and less config.
- Focus on configuration
- Focus on code
- Stream based
- File based
- Plugins are designed to do one thing only
- Plugins often perform multiple tasks
- Uses leaner, simpler JavaScript code
- Uses JSON-like data configuration files
.less
.less
.less
.css
.min.css
.less
.less
.min.css
concat()
less()
minify()
rename()
PIPE
1. Installation
Install Node
$ sudo npm install -g gulp
Install Gulp
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
2. Setup package.json
$ npm init
package.json
Create new node project
{
"name": "project-name",
"version": "1.0.0",
...
}
$ npm install --save-dev gulp
{
"name": "project-name",
"version": "1.0.0",
...
"devDependencies": {
"gulp": "^3.9.0"
}
}
package.json
Add gulp to the project
3. Create gulpfile.js
$ touch gulpfile.js
var gulp = require('gulp');
gulpfile.js
Create gulpfile.js
4. Gulp tasks
var gulp = require('gulp');
gulp.task('taskName1', function(){
...
});
gulp.task('default', ['taskName1', 'taskName2']);
gulpfile.js
$ gulp taskName1
Run task
Recap
1. Installation
2. Setup package.json
3. Create gulpfile.js
4. Gulp tasks
3 main keys:
1. Plugins
2. Streams
3. Tasks
The core of the funtionality of Gulp
The communication between tasks
The place to interact with plugins
Gulp API
gulp.task('taskName', [dependencies], function(done){
...
});
gulp.task
gulp.task('default', ['taskName1', 'taskName2']);
gulp.src(['source/styles/*.css', '...'])
gulp.src
gulp.src(['...', 'build/styles/*.css'])
gulp.dest
gulp.src('source/styles/*.css')
.pipe(gulp.dest('build/styles/'));
gulp.watch('source/styles/*.css', ['taskName']);
gulp.watch
Common Plugins and Tasks
...at least by me
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('css', function(){
gulp.src('source/styles/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest('build/styles/'));
});
Concat files
$ npm install --save-dev gulp-concat
gulpfile.js
var gulp = require('gulp');
var less = require('gulp-less');
gulp.task('css', function(){
gulp.src('source/styles/*.less')
.pipe(less())
.pipe(gulp.dest('build/styles/'));
});
Compile less files
$ npm install --save-dev gulp-less
gulpfile.js
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('js', function(){
gulp.src('source/js/*.js')
.pipe(uglify())
.pipe(gulp.dest('build/js/'));
});
Minify Javascript
npm install --save-dev gulp-uglify
gulpfile.js
var gulp = require('gulp');
var minify = require('gulp-minify-css');
gulp.task('css', function(){
gulp.src('source/styles/*.less')
.pipe(minify({ keepBreaks: true }))
.pipe(gulp.dest('build/styles/'));
});
Minify CSS
npm install --save-dev gulp-minify-css
gulpfile.js
var gulp = require('gulp');
var rename = require('gulp-rename');
gulp.task('css', function(){
gulp.src('source/styles/*.less')
.pipe(minify({ keepBreaks: true }))
.pipe(rename({ suffix: '.min' }))
.pipe(gulp.dest('build/styles/'));
});
Rename
npm install --save-dev gulp-rename
gulpfile.js
gulp.task('watch', function(){
gulp.watch(['source/styles/components/*.css'], ['css']);
gulp.watch(['source/styles/*.less'], ['less']);
gulp.watch(['source/js/*.js'], ['js']);
gulp.watch(['source/*.html'], ['html']);
gulp.watch(['source/img/**/*'], ['images']);
gulp.watch(['source/fonts/**/*'], ['fonts']);
});
gulp.task('build', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);
Watch
gulpfile.js
Grunt requires plug-ins for basic functionality such as file watching; Gulp has them built-in.
http://gulpjs.com/plugins/
around 1800 plugins
How to run Gulp?
var gulp = require('gulp');
...
gulp.task('default', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);
gulpfile.js
$ gulp
command line
var gulp = require('gulp');
...
gulp.task('myGulp', ['css', 'less', 'js', 'html', 'images','fonts', 'watch']);
gulpfile.js
$ gulp myGulp
command line
Recap
1. Installation (Node & Gulp)
2. Setup and start a project
3. Create tasks
4. 3 main concepts
5. Gulp API & plugins
Plugins
Streams
Tasks
gulp.thank(you)
gulp.questions( )
FRONT-END WORKFLOW WITH GULP
By Adrián Bolonio
FRONT-END WORKFLOW WITH GULP
FRONT-END WORKFLOW WITH GULP
- 1,757