forxtu
7/28/2017 - 10:25 AM

Start project with Gulp

Start project with Gulp

// Include gulp
var gulp = require("gulp");

// Include Our Plugins
var jshint = require("gulp-jshint"),
    sass = require("gulp-sass"),
    concat = require("gulp-concat"),
    uglify = require("gulp-uglify"),
    rename = require("gulp-rename"),
    moreCSS = require("gulp-more-css"),
    //cssnano = require("gulp-cssnano"),
    //jade = require("gulp-jade"),
    browserSync = require('browser-sync');


// Browser Sync
gulp.task('browserSync', function() {
  browserSync({
    server: {
      baseDir: 'dist'
    },
  })
});

// Lint Task
gulp.task("lint", function() {
  return gulp.src("src/js/*.js")
    .pipe(jshint())
    .pipe(jshint.reporter("default"));
});

// Compile Our Sass
gulp.task("sass", function() {
  return gulp.src("src/scss/*.scss")
    .pipe(sass())
   // .pipe(cssnano())
    .pipe(gulp.dest("dist/css"))
    .pipe(browserSync.reload({
      stream: true
    }));
});

// Concatenate & Minify JS
gulp.task("scripts", function() {
  return gulp.src("src/js/*.js")
    .pipe(rename("app.js"))
    .pipe(uglify())
    .pipe(gulp.dest("dist/js"))
    //browser sync
    .pipe(browserSync.reload({
      stream: true
    }));
});

// gulp.task("jade", function() {
//   var locals = new Object();

//   gulp.src("src/*.jade")
//     .pipe(jade({
//       locals: locals
//     }))
//     .pipe(gulp.dest("dist/"))
// });

// Watch Files For Changes
gulp.task("watch", ["browserSync", "sass", "scripts"], function() {
  // Watch .js files
  gulp.watch("src/js/*.js", ["lint", "scripts"]);

  // Watch .scss files
  gulp.watch("src/scss/*.scss", ["sass"]);

  // Watch .jade files
  // gulp.watch("src/*.jade", ["jade"]);

  // Watch .html files
  gulp.watch("dist/*.html", browserSync.reload); 
});

// Default Task
gulp.task("default", ["lint", "sass", "scripts", "watch"]);  //add "jade" if need
npm install gulp -g //global install of Gulp

// Create project folder and go inside the folder
npm init // init our project
npm install gulp --save-dev // install Gulp to the project


/* Structure */
'src' folder for the development
'dist' folder for the distribution - deploy


/* Install our plugins */
npm install browser-sync gulp-sass gulp-concat gulp-uglify gulp-rename gulp-more-css gulp-cssnano gulp-jade gulp-jshint --save-dev

// separated
npm install browser-sync --save-dev
npm install gulp-sass --save-dev
npm install gulp-concat --save-dev 
npm install gulp-uglify --save-dev
npm install gulp-rename --save-dev
npm install gulp-more-css --save-dev
npm install gulp-cssnano --save-dev
npm install gulp-jade --save-dev
npm install gulp-jshint --save-dev //searching for errors