Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/shahedhodali/gulpjs-tips

Gulp Js Tips
https://github.com/shahedhodali/gulpjs-tips

gulp gulp-autoprefixer gulp-concat gulp-livereload gulp-notify gulp-plugin gulp-pug gulp-sass gulp-sourcemaps gulp-uglify gulp-zip gulpjs tips vinyl-ftp

Last synced: 3 days ago
JSON representation

Gulp Js Tips

Awesome Lists containing this project

README 

        


  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.



## :dart: 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 



## :dart: 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 ]



## :dart: 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.



## :checkered_flag: Init package and install gulp ##



```bash

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



```



## :white_check_mark: Requirements ##

Before starting, gulpfile Js must be created

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

### Usage EX



```markdown

var gulp = require('gulp');

  //write the first task

  gulp.task('task name' , function(){});



# Going to the Comand Line:

$ gulp (task name)

```



## :rocket: 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



## :video_game: 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 :

       

```mark

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 :

       

```mark

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 :

       

```mark

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 :

       

```mark

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 :

       

```mark

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 :



```mark

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


       - Usage EX :



```mark

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 :



```mark

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 :



 ```mark

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 () 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 :



 ```mark

  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 :



 ```mark

  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 :



 ```mark

  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 :



 ```mark

  $ gulp.src(['project/*.js','!project/two.js']);

```



➤ `Setup Default Task`


       - Usage EX :



 ```mark

 //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 :



```mark

 $ npm i gulp(v)

```