Skip to content

Instantly share code, notes, and snippets.

@bamboo-c
Last active August 29, 2015 14:07
Show Gist options
  • Save bamboo-c/223430783821b94a331b to your computer and use it in GitHub Desktop.
Save bamboo-c/223430783821b94a331b to your computer and use it in GitHub Desktop.
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 ====== //
{
"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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment