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)