Gulp is an open source toolkit built on Node.js and npm. It is used for automating and streamlining repetitive tasks in front-end web development.
- You Need to Be A Good Front-End Developer
- You Need A Very Good Knowledge in JavaScript
- You Need To Know Information About,Preprocessor + Template Engine
- Toolkit to Automate Repeated Tasks in Your Development Environment.
- Gulp Js Built On Node.js
- Example of Tasks. [ Minify CSS, Compile Sass Or Less, Compress Images, Upload Files ]
- Other Task Runners: [ Grunt.js, Feri ]
- More Than 4252 Plugins and Tasks at Date Of This Rebo.
- You Can Create Your Own Defined Tasks.
- Save Your Time and Make You Focus On Code.
- Give You fast Builds Because its Use Power Of NodeJs.
- Has 32.7K Star On Github At Date Of This Rebo Means a Very Large Community Using and Updating It.
- By Using a Task Runner all Your Work Will Be Standard and With One Pattern.
# Check for node, npm, and npx:
$ node --version or node -v
$ npm --version or npm -v
$ npx --version or npx -v
# Creating a package.json file:
$ npm init
# Setup the gulp using command line:
# (globaly)
$ npm install --global gulp-cli or npm i gulp -g
# (localy)
$ npm install --save-dev gulp or npm i --save-dev gulp
# Verify your gulp versions
$ gulp --version or gulp -v
# Note : Create folder inside project (name folder)->(dist)
Before starting, gulpfile Js must be created
- create a file named -> (gulpfile.js) in your project root with these contents
var gulp = require('gulp');
//write the first task
gulp.task('task name' , function(){});
# Going to the Comand Line:
$ gulp (task name)- Retrieve file : src ('file path/') -> [detrmine files names using obj],file name,*.file exitntion, .
- Apply plugins : pipe('plugin to make somthing')
- Send files to client : gulp.dest('dist') -> all files from complies for client
➤ Concatenation Plugin : concat files in one file using (gulp-concat) plugin
- link : (https://www.npmjs.com/package/gulp-concat).
- Install : $ npm install --save-dev gulp-concat or npm i --save-dev gulp-concat.
- Usage EX :
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('task name' , function(){
return gulp.src('files')
.pipe(concat('file name concat.ext'))
.pipe(gulp.dest('dist'))
});
# Going to the Comand Line:
$ gulp (task name)
➤ AutoPrefixer for css3 properties : Prefix CSS with Autoprefixer plugin
- link : (https://www.npmjs.com/package/gulp-autoprefixer).
- Install : $ npm install --save-dev gulp-autoprefixer or npm i --save-dev gulp-autoprefixer
- Usage EX :
var gulp = require('gulp');
var prefixe = require('gulp-autoprefixer');
gulp.task('css' , function(){
return gulp.src('project/*.css')
.pipe(prefixe('last 2 versions'))
.pipe(concat('style.css'))
.pipe(gulp.dest('dist'))
});
# Going to the Comand Line:
$ gulp css
➤ Sass compiler : using (gulp-sass) plugin
- link : (https://www.npmjs.com/package/gulp-sass).
- Install : $ npm install sass gulp-sass --save-dev or npm i sass gulp-sass --save-dev
- Usage EX :
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('css' , function(){
return gulp.src('project/css/*.scss')
.pipe(sass({outputStyle: 'compressed'}))
.pipe(prefixe('last 2 versions'))
.pipe(concat('style.css'))
.pipe(gulp.dest('dist/css'))
});
# Going to the Comand Line:
$ gulp css
➤ Pug compiler : to run a webserver using (static-server) plugin
- link : (https://www.npmjs.com/package/gulp-pug).
- Install : $ npm install gulp-pug or npm i gulp-pug
- Usage EX :
var gulp = require('gulp');
var pug = require('gulp-pug');
gulp.task('html' , function(){
return gulp.src('project/index.pug')
.pipe(pug({pretty: true}))
.pipe(gulp.dest('dist'))
});
# Going to the Comand Line:
$ gulp html
➤ local server : using (gulp-pug) plugin
- EXample plugins: (gulp-webserver , gulp-connect , gulp-live-server , static-server , gulp-serve)
The most used and the best plugin from my opinion (gulp-connect) run a webserver (with LiveReload)
- link : (https://www.npmjs.com/package/static-server).
- Install : $ npm install static-server or npm i static-server
- Make file in the root project name (server.js)
- Put the below code in (server.js) file
- Usage EX :
var StaticServer = require('static-server');
var server = new StaticServer({
rootPath: '.', // required, the root of the server file tree
port: 1337, // required, the port to listen
name: 'my-http-server', // optional, will set "X-Powered-by" HTTP header
host: '10.0.0.100', // optional, defaults to any interface
cors: '*', // optional, defaults to undefined
followSymlink: true, // optional, defaults to a 404 error
templates: {
index: 'foo.html', // optional, defaults to 'index.html'
notFound: '404.html' // optional, defaults to undefined
}
});
server.start(function () {
console.log('Server listening to', server.port);
});
# Going to the Comand Line:
$ node server.js or inside task gulp put the code ( require('./server.js'); )
➤ Wacth Function : swatching globs and running a task when a change occurs.
Tasks are handled uniformly with the rest of the task system.
- Usage EX :
gulp.task('watch' , function(){
require('./server.js');
#Single file path
gulp.watch('filepath',['task name'])
#Multi files
gulp.watch('filepath/folder name /**/*.ext',['task name'])
});
# Going to the Comand Line:
$ gulp watch
➤ Live reload : will not automatically listen for changes using (gulp-livereload) plugin
- link : (https://www.npmjs.com/package/gulp-livereload).
- Install : $ npm install gulp-livereload or npm i gulp-livereload
- Apply livereload using exitntion chrome or script in html or pug file (<script src="http://localhost:35729/livereload.js?snipver=1"></script>)
- Usage EX :
var gulp = require('gulp');
var livereload = require('gulp-livereload');
gulp.task('html' , function(){
return gulp.src('project/index.pug')
.pipe(pug({pretty: true}))
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('watch' , function(){
require('./server.js');
livereload.listen(); //adding in watch task before watch applied
gulp.watch('project/index.pug',['html'])
});
# Going to the Comand Line:
$ gulp watch
➤ Gulp source maps : All plugins between sourcemaps.init() and sourcemaps.write() need to have support for (gulp-sourcemaps) plugin
- link : (https://www.npmjs.com/package/gulp-sourcemaps).
- Install : $ npm install gulp-sourcemaps or npm i gulp-sourcemaps
- Usage EX :
var gulp = require('gulp');
var sourcemaps = require('gulp-sourcemaps');
//pipe(sourcemaps.init()) -> after gulp.src
//pipe(sourcemaps.write())-> after tasks and packges before gulp.dest
gulp.task('html' , function(){
return gulp.src('project/index.pug')
.pipe(sourcemaps.init())
.pipe(pug({pretty: true}))
.pipe(sourcemaps.write('.')) // '.' apply this file beside the same file source mapping
.pipe(gulp.dest('dist'))
.pipe(livereload());
});
gulp.task('watch' , function(){
require('./server.js');
livereload.listen(); //adding in watch task before watch applied
gulp.watch('project/index.pug',['html']);
});
# Going to the Comand Line:
$ gulp watch
➤ Gulp uglify : Minify JavaScript with UglifyJS3 using (gulp-uglify) plugin
- link : (https://www.npmjs.com/package/gulp-uglify).
- Install : $ npm install gulp-uglify or npm i gulp-uglify
- Usage EX :
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('js' , function(){
return gulp.src('project/js/*.js')
.pipe(concat('main.js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(livereload());
});
# call script (<script src="js/main.js"></script>) inside file html
gulp.task('watch' , function(){
require('./server.js');
livereload.listen(); //adding in watch task before watch applied
gulp.watch('project/index.pug',['html']);
gulp.watch('project/js/*.js',['js']);
});
# Going to the Comand Line:
$ gulp watch
➤ Gulp notify : Send messages to Mac Notification Center, Linux notifications (using notify-send) or Windows >= 8 (using native toaster) or Growl as fallback
- link : (https://www.npmjs.com/package/gulp-notify).
- Install : $ npm install gulp-notify or npm i gulp-notify
- Usage EX :
var gulp = require('gulp');
var notify = require('gulp-notify');
gulp.task('html' , function(){
return gulp.src('project/index.pug')
.pipe(pug())
.pipe(gulp.dest('dist'))
.pipe(notify('Html task is Done'))
.pipe(livereload());
});
# Going to the Comand Line:
$ gulp watch
➤ Gulp zip : ZIP compress files
- link : (https://www.npmjs.com/package/gulp-zip).
- Install : $ npm install gulp-zip or npm i gulp-zip
- Usage EX :
var gulp = require('gulp');
var notify = require('gulp-notify');
var zip = require('gulp-zip');
gulp.task('compress' , function(){
return gulp.src('dist/**/*.*')
.pipe(zip('design.zip'))
.pipe(gulp.dest('.'))
.pipe(notify('Files is Compressed'))
});
gulp.task('watch' , function(){
require('./server.js');
livereload.listen();
gulp.watch('project/index.pug',['html']);
gulp.watch('project/js/*.js',['js']);
gulp.watch('dist/**/*.*',['compress']);
});
# Going to the Comand Line:
$ gulp watch
➤ Vinyl ftp : Supports parallel transfers, conditional transfers, buffered or streamed files, and more.
Often performs better than your favorite desktop FTP client
- link : (https://www.npmjs.com/package/vinyl-ftp).
- Install : $ npm install vinyl-ftp or npm i vinyl-ftp
- Usage EX :
var gulp = require('gulp');
var ftp = require( 'vinyl-ftp' );
//Uplode design with FTP
gulp.task( 'deploy', function () {
var conn = ftp.create({
host: 'test.net',
user: 'me',
password: 'mypass',
parallel: 10
});
// using base = '.' will transfer everything to /public_html correctly
// turn off buffering in gulp.src for best performance
return gulp.src( ['dist/**/*.*'], { base: '.', buffer: false } )
.pipe( conn.newer( '/public_html' ) ) // only upload newer files
.pipe( conn.dest( '/public_html' ) )
.pipe(livereload());
});
gulp.task('watch' , function(){
require('./server.js');
livereload.listen();
gulp.watch('project/index.pug',['html']);
gulp.watch('project/js/*.js',['js']);
gulp.watch('dist/**/*.*',['compress']);
gulp.watch('dist/**/*.*',['deploy']);
});
# Going to the Comand Line:
$ gulp watch
➤ Exclude Files: If all files are called and without one file, put [! name file ] in src function
- Usage EX :
$ gulp.src(['project/*.js','!project/two.js']);
➤ Setup Default Task
- Usage EX :
//Default Task
$ gulp.task('default',['watch']);
# Going to the Comand Line:
$ gulp watch
➤ Some Useful Plugins
1- Gulp Babel: Use next generation JavaScript, today, with Babel
link : (https://www.npmjs.com/package/gulp-babel)
2- Gulp Replace: A string replace plugin for gulp
link : (https://www.npmjs.com/package/gulp-replace)
3- Gulp Load Plugins: Loads gulp plugins from package dependencies and attaches them to an object of your choice.
link : (https://www.npmjs.com/package/gulp-load-plugins)
4- Gulp Rename: is a gulp plugin to rename files easily.
link : (https://www.npmjs.com/package/gulp-rename)
5- Gulp Plumber: Prevent pipe breaking caused by errors from gulp plugins
link : (https://www.npmjs.com/package/gulp-plumber)
➤ Install specific Version:
- Usage EX :
$ npm i gulp(v)