Skip to content

Latest commit

 

History

History
417 lines (349 loc) · 13.3 KB

README.md

File metadata and controls

417 lines (349 loc) · 13.3 KB

gulp

Gulp Js Tips

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.

🎯 What You Need To Learn Gulp

  • 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

🎯 What is Gulp Js

  • 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 ]

🎯 Why Should I Use Gulp Js?

  • 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.

🏁 Init package and install gulp

# 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)

✅ Requirements

Before starting, gulpfile Js must be created

  • create a file named -> (gulpfile.js) in your project root with these contents

Usage EX

var gulp = require('gulp');
  //write the first task
  gulp.task('task name' , function(){});

# Going to the Comand Line:
$ gulp (task name)

🚀 Main Functions in gulp js task

  • 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

🎮 Scripts & Plugins

➤ 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)