Gulp Tutorials (sass,livereload,md5,css compression, JS compression, IMG base64)

Environment

Node-v v6.10.3

Npm-v 3.10.10

Package.json as follows:

{  "name": "Zhcsdata",  "version": "1.0.0",  "description": "",  "main": "Index.js",  "scripts": {    "Test": "Echo \" Error:no test specified\ "&& exit 1"  },  "author": "Zengwe",  "license": "ISC",  " Devdependencies ": {    " gulp ":" ^3.9.1 ",    " gulp-base64 ":" ^0.1.3 ",    " Gulp-file-include ":" ^1.1.0 ",    "Gulp-jshint": "^2.0.4",    "Gulp-livereload": "^3.8.1",    "gulp-minify-css": "^1.2.4",    "Gulp-rev": "^ 7.1.2 ",    " Gulp-rev-append ":" ^0.1.8 ",    " Gulp-sass ":" ^2.3.2 ",    " Gulp-sourcemaps ":" ^2.6.0 ",    " Gulp-uglify ":" ^3.0.0 ",    " Gulp-url-replace ":" ^1.0.2 ",    " Jshint ":" ^2.9.5 ",    " Node-gyp ":" ^3.6.2 "  }}

File directory structure:

Gulpfile.js as follows:

var gulp = require (' gulp '); var sass = require (' Gulp-sass '); var fileinclude = require (' gulp-file-include '); var livereload = require (' Gulp-livereload '); var rev = require (' gulp-rev-append '); var replace = require (' gulp-url-replace '); var cssmin = require (' Gulp-minify-css '); var uglify = require (' gulp-uglify '); var base64func =require ("gulp-base64"); var base64= {//src: __dir        Name + ' Css/*.css ',//dest: __dirname + '/css ', options: {//basedir: __dirname, extensions: [' png '], MAXIMAGESIZE:20 * 1024x768,//Bytes//debug:false}}gulp.task (' sass ', function () {GULP.SRC (['./static _temp/sass/*.scss ', "./static_temp/sass/*/*.scss"]). Pipe (Sass ()). On (' Error ', function (err) {gut            Il.log (' Scss error! ', err.message);        This.end (); }). Pipe (Cssmin ()). Pipe (Base64func (base64)). Pipe (Gulp.dest ('./static/css ');}); Gulp.task (' JS ', function () {GULP.SRC (['./static_temp/js/*.js ', "./static_temp/js/*/*.js"]). Pipe (Uglify ({mangle:true})). Pipe (Gulp.dest ('./static/js/'));});          Gulp.task (' HTML ', function () {GULP.SRC (['./view_temp/*.html ', './view_temp/html/*.html ']). Pipe (Fileinclude ({ Prefix: ' @@ ', BasePath: ' @file '}). On (' Error ', function (err) {Gutil.log (' HTML            error! ', err.message);        This.end (); }). pipe (replace ({": /static/":" f:/golang/code/src/zhcsdata/static/"}). Pipe (rev ()). Pipe (replace ({" f:/golang/code/src/zhcsdata/ static/":". /static/"}). Pipe (Gulp.dest ('./view '), {base:". "});  Gulp.task ("Reload", function (event) {Livereload.listen ();    }); Gulp.task (' Default ', function () {gulp.run (' html ', ' Reload ', ' JS '); Gulp.watch (["./view_temp/html/*.html", "./view_temp/html/*/*.html", "./view_temp/common/*.html"],function (event)        {Console.log ("Common HTML Changed");    Gulp.run ("HTML");    }); Gulp.watch (['./static_temp/sass/*.scss ', './static_temp/sass/*/*.scss '),function () {Gulp.run ("sass");    });        Gulp.watch (["./view/*.html", "./view/*/*.html", "./static/css/*.css", "./static/css/*/*.css"],function (event) {        Console.log ("file changed, reload");        Livereload.changed (Event.path);    Gulp.run ("Reload"); })});

Index.html

<link rel= "stylesheet" href= ". /static/css/[email protected] @hash ">@ @include (' ... /common/header.html ', {"name": "This is the variable in the Header"}) <div class= "Demo" >    GULP demo Zengwe!!! SS    <div class= "Child" >child</div></div>

Index.scss as follows:

. demo{  color:red;  . child{    Color:black;    font-size:24px;    Background:url ("/static/img/logo_g.png");}  }

Header.html as follows:

<meta charset= "Utf-8" >
The rest is irrelevant files or generated files, JS content is not necessary to post, anyway, just compression
PS: There is a problem, when the new file is watch on the new file is invalid, delete the file when the past generated files need to manually delete
Code: GitHub
Gulp Tutorials (sass,livereload,md5,css compression, JS compression, IMG base64)