Getting Started with Gulp.js

gulpfile.js

/*  
   LIVE RELOAD   ✔
   SCSS TO CSS   ✔
   MINIFY CSS    ✔
   PREFIX CSS    ✔
   MINIFY JS     ✔
   TRANSPILE JS  ✔
*/

var gulp = require("gulp");

var sass= require("gulp-sass");
var browserSync = require('browser-sync').create();

// Converting scss to css
gulp.task("sass", function() {

    return gulp.src("app/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app"))
        .pipe(browserSync.reload({
            stream: true
        }))
	
});


// Live reloading 
gulp.task('browserSync', function() {
	browserSync.init({
		server: {
			baseDir: 'app'
		},
	})
})


// Gulp provides us with a watch method that checks to see if a file was saved
// With watch task live reload occur
gulp.task('watch', ['browserSync', 'sass'], function (){
     // Inject css whenever it change
     gulp.watch('app/*.scss', ['sass']);

     // Reloads browser whenever HTML or JS files change
     gulp.watch("app/*.html",browserSync.reload);
     gulp.watch("app/*.js",browserSync.reload);
})





// minify-css
var cleanCSS = require('gulp-clean-css');

gulp.task('minify-css', function() {
  return gulp.src('css/*.css')
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest('dist'));
});





// prefix-css
var autoprefixer = require('gulp-autoprefixer');

gulp.task('prefix-css', () =>
	gulp.src('css/*.css')
		.pipe(autoprefixer({
			browsers: ['last 2 versions'],
			cascade: false
		}))
		.pipe(gulp.dest('dist'))
);


/* === PREFIX AND MINIFY CSS IN SAME TASK === */
// prefix-minify-css
var cleanCSS = require('gulp-clean-css');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('prefix-minify-css', () =>
	gulp.src('css/*.css')
		.pipe(autoprefixer({
			browsers: ['last 2 versions'],
			cascade: false
		}))
		
		.pipe(cleanCSS({compatibility: 'ie8'}))   //  <<<<<<<< WE ADDED HERE!
		.pipe(gulp.dest('dist'))
);




// minify-js
// <! dont need variable for babili !> npm install babili
var babel = require('gulp-babel');

gulp.task('minify-js', () =>
	gulp.src('./*.js')
		.pipe(babel({presets: ['babili']}))
		.pipe(gulp.dest('dist'))
);

// OR 
// <! this does not minify es6 !>
// To minify js files, install gulp-uglify and pump. 
var uglify = require('gulp-uglify');
var pump = require('pump');
 
gulp.task('minify-js', function (cb) {
  pump([
        gulp.src('./main.js'),
        uglify(),
        gulp.dest('dist')
    ],
    cb
  );
});




// compile-js
// <! dont forget to install babel-preset-env !>
var babel = require('gulp-babel');

gulp.task('compile-js', () =>
	gulp.src('./main.js')
		.pipe(babel({
			presets: ['env']
		}))
		.pipe(gulp.dest('dist'))
);





/* === TRANSPILE AND MINIFY JS IN SAME TASK === */
// We need to install gulp-babel and babili <! dont need variable for babili !>
var babel = require('gulp-babel');

gulp.task('transpile-minify-js', () =>
	gulp.src('./*.js')
		.pipe(babel({
			presets: ['env']
		}))
		.pipe(babel({presets: ['babili']}))
		.pipe(gulp.dest('dist'))
);



// Run multiple task at the same time!
gulp.task('runAll', ['task1','task2','task3']);



// --* QUICK NOTES *-- //

// Make  baseDir: './' if you want to put index.html out of app file

// ('app/scss/**/*.scss') // Gets all files ending with .scss in app/scss and children dirs
// ("app/*.scss") //  matches any pattern in the current directory in root folder, it's now gulpdemo

gulpfile2.js

/* 

 Live reload
 Compile, minify js
 Prefix, minify css + PostCSS
 
*/

var gulp = require("gulp");
var browserSync = require("browser-sync").create();

var babel = require("gulp-babel");
var rename = require("gulp-rename");

var autoprefixer = require("gulp-autoprefixer");
var cleanCss = require("gulp-clean-css");

// postcss
var postcss = require("gulp-postcss");
var cssnext = require("postcss-cssnext");




// live reload
gulp.task("browser-sync", () => {
  browserSync.init({
    server: {
      //baseDir: "/",
      proxy: "http://localhost:3000"
    }
  });
});




// css postcss, prefix and minify
// need gulp-postcss, postcss-cssnext, gulp-autoprefixer and gulp-clean-css //
gulp.task("postcss-prefix-minify-css", () => {
  var plugins = [cssnext];

  gulp
    .src("./*.css")
    .pipe(
      autoprefixer({
        browsers: ["last 4 versions"],
        cascade: false
      })
    )

    // postcss
    .pipe(postcss(plugins))

    // minify
    .pipe(cleanCss({ compatibility: "ie8" }))

    .pipe(rename({ basename: "bundle", suffix: ".min" }))
    .pipe(gulp.dest("dist"));
});

// css watch
gulp.task("css-watch", ["postcss-prefix-minify-css"], () => {
  gulp.src("./*.css").pipe(
    browserSync.reload({
      stream: true
    })
  );
});




// js compile and minify and rename
// need babel-core, gulp-babel, babel-preset-env, babili and gulp-rename //
gulp.task("compile-minify-js", () => {
  gulp
    .src("./*.js")
    .pipe(
      babel({
        presets: ["env"]
      })
    )
    .pipe(babel({ presets: ["babili"] }))
    .pipe(rename({ basename: "bundle", suffix: ".min" }))
    .pipe(gulp.dest("dist"));
});

// js-watch
gulp.task("js-watch", ["compile-minify-js"], done => {
  gulp.src("./*.js");
  browserSync.reload();
  done();
});




/* === GULP WATCH  === */
gulp.task("watch", ["browser-sync"], () => {
  gulp.watch("./*.html", browserSync.reload);
  gulp.watch("./*.css", ["css-watch"]);
  gulp.watch("./*.js", ["js-watch"]);
});

package2.json

{
  "name": "gulp-app",
  "version": "1.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "babili": "^0.1.4",
    "browser-sync": "^2.23.6",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-clean-css": "^3.9.3",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "postcss-cssnext": "^3.1.0"
  }
}