gulp之壓縮合並MD5清空替換加前綴以及自動編譯自動刷新瀏覽器大全

gulp是基於流的前端構件化工具。目前比較火的前端構建化工具還是挺多的，grunt gulp fis3等等。

這個鬼東西有什么用？請參考https://www.zhihu.com/question/35595198

為什么選擇gulp,因為使用非常簡單，學習成本低。以后想用別的工具再轉去學也不難。

一個自動化構建工具都沒用過的前端，何以談人生？

 

以下是正題：

1.要玩gulp,首先得安裝node,因為npm跟隨node的包安裝管理工具。具體下載直接百度nodejs中文網，根據自身的環境（windows linux mac）下載安裝包（msi）。直接進行傻瓜式安裝。

2.安裝完node后開始全局安裝gulp, 在命令行輸入命令 npm install -g gulp ,安裝成功后就可以在命令行輸入gulp相關的命令了，例如gulp -v查看當前版本號。（npm安裝不成功建議在命令前加sudo 或將 npm 換 cnpm 再試試）

3.在項目中安裝 npm install --save-dev gulp，安裝成功后就可以開始寫配置文件了。

4.在項目根目錄中創建文件  gulpfile.js

以下是簡單的gulpfile.js  demo代碼

代碼這種東西一開始不會寫，就先抄，抄着抄着就懂怎么寫了。

//引入插件
var gulp = require('gulp');
var less = require('gulp-less');//需要npm install --save-dev gulp-less

var paths = ['./css/*.less'];　　//定義一個數組，指定文件路徑

//下面開始編寫一個任務
//less編譯任務 
gulp.task('less', function() {   //創建一個gulp任務，任務名字是'less'，然后一個回調函數
    return gulp.src(paths)　　　　//gulp任務操作的源文件'paths'
           .pipe(less())         //執行less編譯
           .pipe(gulp.dest('./css'));  //gulp任務輸出的新文件
});
//watch監聽任務
gulp.task('watch', function(){   //創建第二個gulp任務，任務名字是‘watch',然后一個回調函數
    gulp.watch(paths,['less']);  //gulp的watch監聽，文件改動后立即重新執行less任務 可參考http://www.gulpjs.com.cn/docs/api/
});
//gulp.watch('default',['less']);
gulp.task('default', ['less','watch']);　　//gulp的default任務，相當於glup的執行入口。然后把less任務和watch放進來，該腳本就會執行這兩個任務

 

把以上代碼寫入gulpfile.js 后保存，然后項目根路徑下執行命令 

gulp

就開始執行gulp完成你安排的任務。

日常開發中需要gulp做的有很多如合並文件（gulp-concat）壓縮（gulp-uglify）重命名（gulp-rename）等等。

這就需要自己編寫task來讓gulp來執行。

最后總結一下，寫好一個gulpfile.js很簡單，結合demo代碼和下面五個命令

gulp.task(name, fn)//新建一個gulp任務，name是任務名，fn回調函數

gulp.run(tasks...)//盡可能多的並行運行多個task 新版本中的gulp中使用run會發出警告，這樣的情況下我們可以用start代替

gulp.watch(glob, fn//)當glob內容發生改變時，執行fn

gulp.src(glob)//返回一個可讀的stream

gulp.dest(glob)//返回一個可寫的stream

 需要更多的說明或者操作可以去下面的網站逛一逛

gulp官方網址：http://gulpjs.com

gulp插件地址：http://gulpjs.com/plugins

最后簡單寫就幾個常用的gulp task，方便日后調用

一、壓縮css

var minifycss = require('gulp-minify-css');//引用插件，需npm install --save-dev gulp-minify-css

gulp.task('minifycss', function() {
return gulp.src('src/css/*.css') //壓縮的文件
.pipe(minifycss()) //執行壓縮
.pipe(gulp.dest('dst/css')); //輸出文件夾
});

二、壓縮js

var concat = require('gulp-concat'),

    uglify = require('gulp-uglify'),

    rename = require('gulp-rename');　　//引用插件，需npm install --save-dev xxxxxx

gulp.task('minifyjs', function() {

    return gulp.src('src/*.js')　　//操作的源文件

        .pipe(concat('main.js'))    //合並所有js到main.js

        .pipe(gulp.dest('minified/js'))    //輸出main.js到文件夾

        .pipe(rename({suffix: '.min'}))   //rename壓縮后的文件名

        .pipe(uglify())    //壓縮

        .pipe(gulp.dest('minified/js'));  //輸出

});

 三、清空輸出目錄

var del =require('del');
gulp.task('clean', function() {
  return del(['dst']);　　//'dst'是一個目錄
});

四、壓縮圖片

const imagemin = require('gulp-imagemin');
 
gulp.task('default', function(){
    return gulp.src('src/images/*')
           .pipe(imagemin())
           .pipe(gulp.dest('dist/images'));
});

五、壓縮html

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
 
gulp.task('htmlMin', function () {
    var options = {
        removeComments: true,//清除HTML注釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dst'));
});

六、合並文件

var concat = require('gulp-concat');
 
gulp.task('concat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))//合並后的文件名
        .pipe(gulp.dest('dist/js'));
});

七、css自動處理瀏覽器前綴,如添加-webkit-解決瀏覽器兼容問題

var autoprefixer = require('gulp-autoprefixer');
 
gulp.task('autoprefixer', function () {
    gulp.src('css/index.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('dist/css'));
});

 八、給文件加上MD5戳

var rev = require('gulp-rev');
gulp.task('rev', function() {
    return gulp.src([config.src + config.resource])
        .pipe(rev())　　　　　　　　//加上MD5戳
        .pipe(gulp.dest(config.app))//輸出文件
        .pipe(rev.manifest())//生成rev-manifest.json，該文件用於替換HTML CSS文件中引用的MD5文件路徑
        .pipe(gulp.dest(config.rev))//rev-manifest.json文件放在rev目錄下
});

九、給html css文件替換路徑

var revCollector = require('gulp-rev-collector');

gulp.task('revCollector', function() {
    return gulp.src(['rev/*.json', 'config/*.css','config/*.html']) //讀取 rev-manifest.json 文件以及需要進行文件名替換的文件
        .pipe(revCollector({
            replaceReved: true
        })) //執行文件內引用名的替換
        .pipe(gulp.dest('config/app')); //替換后的文件輸出的目錄
});

十、修改文件后自動編譯less/sass

見文章首部demo講解

十一、修改文件后自動刷新瀏覽器

browserSync = require('browser-sync');
var reload = browserSync.reload;
gulp.task('watch',function(){
    browserSync({
        server:{
            baseDir:'./src'　　//設置項目根目錄，由此啟動一個服務器
        }
    });
    gulp.watch('src/*.html',reload);//監聽html文件，文件變動馬上自動刷新瀏覽器頁面 
});

當設定的文件發生變動時，會自動啟動一個本地服務器localhost:3000,然后讀取baseDir中的目錄。

如果你的文件就在服務器里，代碼需要修改成這樣

// 代理
gulp.task('watch', function() {
    browserSync.init({
        proxy: "你的域名或IP"
    });
　　gulp.watch('src/*.html',reload);//監聽html文件，文件變動馬上自動刷新瀏覽器頁面

});

如果對於browser-sync還有疑問請看

browser-sync+gulp中文說明網：http://www.browsersync.cn/docs/gulp/

browser-sync中文網：http://www.browsersync.cn/

以上十個代碼塊本人親測能用。如果不能用請檢查是否install 是否require 語法是否錯誤等等。仍有疑問請聯系。

本文原創，轉載文章之后必須在文章頁面明顯位置給出作者和原文連接。