Resources
Create a project
Make a new folder and run the following code
mkdir sample-project
cd sample-project
sudo npm init
This will initialize your project and add a file package.json
.
Install the gulp command
sudo npm install --global gulp-cli
Install gulp in your devDependencies
In your project directory:
sudo npm install --save-dev gulp
It will add gulp as devDependency in package.json
// package.json
"devDependencies": {
"gulp": "^3.9.1"
}
Create a Gulpfile.js
Create a file called Gulpfile.js
in your project root:
var gulp = require('gulp');
gulp.task('default', function() {
// place code for your default task here
});
Test it out
Run the gulp command in your project directory to execute the default task:
gulp
Task is executed:
Plugins
To perform tasks we also need plugins that add functionality to Gulp. You can add as many plugins as you need.
The simplest way is to install them in batch (based on your needs), however you can also install them one by one
// batch
sudo npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del
// one plugin
sudo npm install --save-dev gulp-load-plugins
Sample file
Generally you will see there is a pattern in which plugins you use and you will prepare your default setup gulpfile.js
. Here is mine:
'use strict';
var gulp = require( 'gulp' );
var env = require( 'babel-preset-env' );
var runSequence = require( 'run-sequence' );
var del = require( 'del' );
// loading in all plugins that start with 'gulp'
var plugins = require( 'gulp-load-plugins' )( {
pattern: [ 'gulp-*', 'gulp.*', '@*/gulp{-,.}*', 'main-bower-files' ],
replaceString: /^gulp(-|\.)/,
camelize: true,
rename: {
'gulp-clean-css': 'cleanCSS'
}
} );
// Define default destination folder
var src = 'src/';
var build = 'app/';
// TASK FOR BABEL
gulp.task( 'babel', function () {
return gulp.src( src + 'js/getVersion.js' )
.pipe( plugins.babel( {
'presets': [
[ 'env']
]
} ) )
.pipe( plugins.rename( {
basename: 'transpiled'
} ) )
.pipe( gulp.dest( src + 'js/' ) )
.pipe( plugins.notify( {
message: 'Babel transpiled'
} ) );
} );
// Delete CSS files - dependencies & build
gulp.task( 'clean', function () {
return del( [
build + 'index.html',
build + 'css/*',
build + 'js/*',
build + 'lib/*',
src + 'css/*',
src + 'js/main.js',
src + 'js/main.min.js',
src + 'js/transpiled.js',
src + 'lib/*'
] );
} );
// jQuery
gulp.task( 'copy-jquery', function () {
return gulp.src( 'bower_components/jquery/dist/jquery.min.js' )
.pipe( gulp.dest( build + 'lib/js' ) )
.pipe( gulp.dest( src + 'lib/js' ) )
.pipe( plugins.notify( {
message: 'jQuery copied'
} ) );
} );
// Bootstrap
gulp.task( 'copy-bootstrap', function () {
return gulp.src( 'bower_components/bootstrap/dist/css/bootstrap.min.css' )
.pipe( gulp.dest( src + 'lib/css' ) )
.pipe( gulp.dest( build + 'lib/css' ) )
.pipe( plugins.notify( {
message: 'Bootstrap copied'
} ) );
} );
// Ladda buttons
gulp.task( 'copy-ladda', function () {
return gulp.src( 'node_modules/ladda/dist/**' )
.pipe( gulp.dest( src + 'lib/ladda' ) )
.pipe( gulp.dest( build + 'lib/ladda' ) )
.pipe( plugins.notify( {
message: 'Ladda copied'
} ) );
} );
// Copy html
gulp.task( 'copy-html', function () {
return gulp.src( src + 'index.html' )
.pipe( gulp.dest( build ) )
.pipe( plugins.notify( {
message: 'HTML copied'
} ) );
} );
// Concatenate & Minify JS
gulp.task( 'scripts', function () {
// return gulp.src( src + 'js/transpiled.js' )
return gulp.src( src + 'js/getVersion.js' )
.pipe( plugins.concat( 'main.js' ) )
.pipe( gulp.dest( build + './js/' ) )
.pipe( gulp.dest( src + './js/' ) )
.pipe( plugins.notify( {
message: 'Scripts minified and copied'
} ) )
.pipe( plugins.livereload() );
} );
var swallowError = function ( err ) {
// gulputil.log(err.toString());
process.stdout.write( err );
this.emit( 'end' );
};
// Build CSS and it's minified version from LESS
gulp.task( 'less', function () {
return gulp.src( src + './less/main.less' )
.pipe( plugins.less()
// .on('error', sass.logError))
.on( 'error', swallowError ) )
.pipe( plugins.autoprefixer() )
.pipe( plugins.rename( {
basename: 'style'
} ) )
.pipe( gulp.dest( build + './css/' ) )
.pipe( plugins.rename( {
suffix: '.min'
} ) )
.pipe( plugins.cleanCSS( {
keepBreaks: false,
compatibility: 'ie9'
} ) )
.pipe( gulp.dest( build + './css/' ) )
.pipe( gulp.dest( src + './css/' ) )
.pipe( plugins.notify( {
message: 'LESS/CSS minified and copied'
} ) );
} );
// The default run action
gulp.task( 'default', function () {
runSequence(
[ 'clean' ], [ 'less' ], [ 'copy-html', 'copy-ladda' ,'copy-jquery', 'copy-bootstrap' ], // parallel
//[ 'babel' ],
[ 'scripts' ]
);
} );
// Rerun the task when a file changes
gulp.task( 'watch', function () {
plugins.livereload.listen();
gulp.watch( [ src + 'js/*.js', src + 'less/*.less', src + 'index.html' ], [ 'default' ] );
} );
Have fun using Gulp in your projects!