What is Gulp?

Is a toolkit for automating painful or time-consuming tasks in your development workflow.

$ npm init -y

package.json

{
  "name": "test-npm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

$ npm install 

Installing gulp

$ npm install --global gulp
$ gulp -v

globally

$ npm install --save-dev gulp
$ gulp -v

locally

gulpfile.js

  var gulp = require('gulp');

• gulp.task

• gulp.src

• gulp.dest

• gulp.watch

var gulp = require('gulp');

gulp.task('mytask', function() {
  //do stuff
});

gulpfile.js

Pipe method

"The readable.pipe() method attaches a Writable stream to the readable, causing it to switch automatically into flowing mode and push all of its data to the attached Writable. The flow of data will be automatically managed so that the destination Writable stream is not overwhelmed by a faster Readable stream."

var gulp = require('gulp');

gulp.task('copy', function() {
  gulp.src('source/*').pipe(gulp.dest('destination'));
});

gulpfile.js

var gulp = require('gulp');

gulp.task('listenJs', function() {
  gulp.watch('js/*.js', ['sayHi']);
});

gulp.task('sayHi', function() {
  console.log('Hola')
});

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  gulp.watch('js/*.js', ['sayHi']);
});

gulp.task('sayHi', function() {
  console.log('Hola')
});

gulpfile.js

$ npm install --save-dev gulp-less 

@primary: #1C3C43;
@secondary: #2B7E7C;
@third: #F1EC99;
@black-color: #000;
@white-color: #FFF;

html{
    body{
        background-color: @secondary;

        p{
            color: @third;
        }

        h1{
            color: @primary;
        }

        .jumbotron{
            color: orange;
        }
    }
}

$ npm install --save-dev gulp-pug

Minify/uglify

$ npm install --save-dev gulp-uglify
$ npm install --save-dev gulp-csso

Concat

$ npm install --save-dev gulp-concat

browserSync

$ npm install --save-dev browser-sync

$ npm install --save-dev karma