gulpfile.js

gulpfile.js

"use strict";

// variables
var gulp         = require("gulp");
var $            = require("gulp-load-plugins")();
var jade         = require("gulp-jade");
var stylus       = require("gulp-stylus");
var spritesmith  = require("gulp.spritesmith");
var uglify       = require("gulp-uglify");
var autoprefixer = require("gulp-autoprefixer");
var concat       = require("gulp-concat");
var concatCss    = require("gulp-concat-css");
var csslint      = require("gulp-csslint");
var cssmin       = require("gulp-cssmin");
var imagemin     = require("gulp-imagemin");
var pngcrush     = require("imagemin-pngcrush");
var watch        = require("gulp-watch");
var sourcemaps   = require("gulp-sourcemaps");
var browserSync  = require("browser-sync");
var pagespeed    = require("psi");
var cache        = require("gulp-cache");
var runSequence  = require("gulp-run-sequence");
var plumber      = require("gulp-plumber");
var wait         = require("gulp-wait");
var reload       = browserSync.reload;

// ===== Sources path ====== //
var sources = {
      // dist
      html: "dist/*.html",
      js: "dist/js/",
      css: "dist/styles/",
      imgDist: "dist/img/",

      // assets
      styl: "assets/styles/styl/main.styl",
      stylChild: "assets/styles/styl/**.styl",
      jsAssets: "assets/js/**/**.js",
      jade: "assets/jade/**.jade",
      jadeChild: "assets/jade/**/**.jade",
      img: "assets/img/**/*",
      sprites: "assets/img/parts/*.png",
      spritesCss: "assets/styles/styl/"
    };
// ===== Sources path ====== //

// ===== Jade compile ====== //
gulp.task("jade", function () {
  return gulp.src(sources.jade)
    .pipe(plumber())
    .pipe(jade({
      pretty: false
    }))
    .pipe(gulp.dest("dist"));
});
// ===== jade compile ====== //

// ===== stylus compile ====== //
gulp.task("styles:styl", function () {
  gulp.src(sources.styl)
    .pipe(plumber())
    .pipe(stylus())
    .pipe(wait(100))
    .pipe(gulp.dest(sources.css));
});
// ===== stylus compile ====== //

// ===== css optimaize ====== //
gulp.task("styles:css", function () {
  gulp
    .src(sources.css + "*.css")
    .pipe(plumber())
    .pipe(autoprefixer("last 1 version"))
    .pipe(gulp.dest(sources.css))
    .pipe(reload({stream: true}))
    .pipe($.size({title: "styles:css"}));
});
// ===== css optimaize ====== //

// ===== output final css style ====== //
gulp.task("styles", ["styles:styl", "styles:css"]);
// ===== output final css style ====== //

// ===== css sprite ====== //
gulp.task("sprite", function () {
  var spriteData = gulp.src(sources.sprites).pipe(spritesmith({
    imgName: "parts.png",
    cssName: "_parts.styl",
    imgPath: "../img/parts.png",
    padding: 10,
    cssFormat : "stylus"
  }));
  spriteData.img.pipe(gulp.dest(sources.imgDist));
  spriteData.css.pipe(gulp.dest(sources.spritesCss));
});
// ===== css sprite ====== //

// ===== JavaScript Optimaize ====== //
gulp.task("scripts", function () {
  return gulp.src(["assets/js/vender/jquery.min.js", "assets/js/Main.js", "assets/js/lib/*.js"])
    .pipe(plumber())
    .pipe(sourcemaps.init())
      .pipe(concat("Main.js"))
    .pipe(sourcemaps.write())
    .pipe(uglify())
    .pipe(gulp.dest(sources.js));
});
// ===== JavaScript Optimaize ====== //

// ===== JShint ====== //
gulp.task("jshint", function () {
  return gulp.src(sources.js + ".js")
    .pipe(plumber())
    .pipe($.jshint())
    .pipe($.jshint.reporter("jshint-stylish"))
    .pipe($.jshint.reporter("fail"))
    .pipe(reload({stream: true, once: true}));
});
// ===== JShint ====== //

// ===== CSShint ====== //
gulp.task("csslint", function () {
  return gulp.src(sources.css + "*.css")
    .pipe(plumber())
    .pipe(csslint())
    .pipe(csslint.reporter());
});
// ===== CSShint ====== //

// ===== image optimize ====== //
gulp.task("images", function () {
  return gulp.src(sources.img)
    .pipe(plumber())
    .pipe($.cache($.imagemin({
        progressive: true,
        interlaced: true,
        svgoPlugins: [{removeViewBox: false}],
        use: [pngcrush()]
    })))
    .pipe(gulp.dest("dist/img"));
});
// ===== image optimize ====== //

// ===== cache clear ====== //
gulp.task("clear", function ( i_done ) {
  return cache.clearAll( i_done );
});
// ===== cache clear ====== //

// ===== files watch and make a local server ====== //
gulp.task("default", function () {
  browserSync.init(null, {
    server: {
        baseDir: ["dist"]
    },
    notify: false
  });

  gulp.watch([sources.sprites], ["sprite"]);
  gulp.watch([sources.stylChild], ["styles"]);
  gulp.watch([sources.jadeChild], ["jade"]);
  gulp.watch([sources.jade], ["jade"]);
  gulp.watch([sources.css + "*.css"], reload);
  gulp.watch([sources.html], reload);
  gulp.watch([sources.js + "*.js"], ["jshint"]);
  gulp.watch([sources.jsAssets], ["scripts"]);
  gulp.watch([sources.img], ["images"]);
});
// ===== files watch and make a local server ====== //

// ===== build ====== //
gulp.task("build", function ( i_cb ) {
 runSequence("styles", ["jshint", "csslint", "jade", "images"], i_cb);
});
// ===== build ====== //

// ===== google pageSpeed ====== //
gulp.task("pagespeed", pagespeed.bind(null, {
   url: "https://example.com",
   strategy: "mobile"
}));
// ===== google pageSpeed ====== //

package.json

{
  "devDependencies": {
    "browser-sync": "^0.9.1",
    "clone-stats": "0.0.1",
    "core-util-is": "^1.0.1",
    "gulp": "^3.8.7",
    "gulp-autoprefixer": "^1.0.0",
    "gulp-cache": "^0.2.2",
    "gulp-concat": "^2.4.0",
    "gulp-concat-css": "^0.1.4",
    "gulp-csslint": "^0.1.5",
    "gulp-cssmin": "^0.1.6",
    "gulp-csso": "^0.2.9",
    "gulp-flatten": "^0.0.2",
    "gulp-if": "^1.2.1",
    "gulp-imagemin": "^1.0.1",
    "gulp-jade": "^0.7.0",
    "gulp-jshint": "^1.5.3",
    "gulp-load-plugins": "^0.5.0",
    "gulp-minify-css": "^0.3.8",
    "gulp-plumber": "^0.6.5",
    "gulp-replace": "^0.3.0",
    "gulp-run-sequence": "^0.3.2",
    "gulp-size": "^0.4.0",
    "gulp-sourcemaps": "^1.1.4",
    "gulp-stylus": "^1.3.0",
    "gulp-uglify": "^1.0.1",
    "gulp-useref": "^0.4.3",
    "gulp-wait": "0.0.2",
    "gulp-watch": "^0.7.0",
    "gulp.spritesmith": "^1.2.0",
    "imagemin-pngcrush": "^0.1.0",
    "inherits": "^2.0.1",
    "isarray": "0.0.1",
    "jshint-stylish": "^0.4.0",
    "lodash": "^2.4.1",
    "opn": "^0.1.1",
    "psi": "0.0.3",
    "rimraf": "^2.2.8",
    "run-sequence": "^0.3.6"
  },
  "engines": {
    "node": ">=0.10.0"
  }
}