gulp教程（sass，livereload，md5，css壓縮，js壓縮，img的base64）

標籤：ade   pipe   sheet   nod   技術   error:   ref   sage   amp   

環境

node -v  v6.10.3

npm -v  3.10.10

package.json如下：

{  "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"  }}

　　檔案目錄結構：

 

gulpfile.js如下：

 

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: __dirname + ‘css/*.css‘,    //dest: __dirname + ‘/css‘,    options: {        //baseDir: __dirname,        extensions: [‘png‘],        maxImageSize: 20 * 1024, // bytes        // debug: false    }}gulp.task(‘sass‘, function() {    gulp.src([‘./static_temp/sass/*.scss‘,"./static_temp/sass/*/*.scss"])        .pipe(sass())        .on(‘error‘, function(err) {            gutil.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":"這是在header中的變數"})<div class="demo">    gulp demo zengwe!!!ss    <div class="child">child</div></div>

　　index.scss如下：

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

　　header.html 如下：

<meta charset="utf-8"><h1>    這個是頭部檔案ssd</h1><h2>@@name</h2>

　　其餘的是無關檔案或者是產生的檔案，js的內容沒必要貼出，反正只是壓縮而已

ps:目前存在一個問題，當新增檔案是watch對新增檔案無效，刪除檔案時過去產生的檔案需手動刪除

代碼：github

gulp教程（sass，livereload，md5，css壓縮，js壓縮，img的base64）