gulp入門

參考文章：

                   gulp官網  https://www.gulpjs.com.cn/docs/getting-started/

                 《Gulp 入門指南》- 前言  https://github.com/onface/blog/issues/19 （查看此文章，可快速入門）

                    UglifyJS2（https://github.com/mishoo/UglifyJS2）（uglifyJs使用指南）

gulp 是 Web 前端自動化開發的工具。要使用gulp必須先安裝node.js，gulp基於node.js實現自動化工具。

• 使用 gulp 壓縮 JS（min版）
• 使用 gulp 壓縮 CSS
• 使用 gulp 壓縮圖片
• 使用 gulp 壓縮html
• 使用 gulp 編譯 LESS
• 使用 gulp 編譯 Sass
• 使用 gulp 構建一個項目

安裝：

npm install gulp

--查看是否安裝成功
gulp -v

 

使用 gulp 壓縮 JS

若是要壓縮css,js文件須要用到uglify.js（壓縮，混淆），不然會出現module.js throw error. 

在npm最後可加入參數 -g， 區別在於，-g可在command line 中直接使用

npm install gulp-uglify

安裝完畢後，在項目下創建gulpfile.js文件，gulp 的全部配置代碼都寫在 gulpfile.js 文件。

在執行gulp文件時，gulp會自動查找gulpfile.js文件。

node.js中引入module模塊，gulp和 gulp-uglify

var gulp = require('gulp');
var uglify = require('gulp-uglify')

 建立task任務,取名script：

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

在命令行進入gulpfile.js所在文件夾目錄，執行:

gulp [taskname] .....

gulp script

若是文件修改後，每次執行命令會很麻煩，所以能夠創建監聽。

gulp.watch('js/*.js', ['script']);

將這個監聽放入到task中，執行gulp auto 便可開啓自動監聽。除非退出控制檯【ctrl+c】，中止監聽。

// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 script 任務
    gulp.watch('js/*.js', ['script'])
})

默認任務名爲 default ，即 

gulp.task('default',function(){
    //todo
});

// 或

gulp.task('default', ['script', 'auto']);

執行時，直接輸入gulp便可。

JS 完整壓縮代碼：

// 獲取 gulp
var gulp = require('gulp')

// 獲取 uglify 模塊（用於壓縮 JS）
var uglify = require('gulp-uglify')

// 壓縮 js 文件
// 在命令行使用 gulp script 啓動此任務
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('js/*.js')
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js'))
})

// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 script 任務
    gulp.watch('js/*.js', ['script'])
})


// 使用 gulp.task('default') 定義默認任務
// 在命令行使用 gulp 啓動 script 任務和 auto 任務
gulp.task('default', ['script', 'auto'])

異常：

GulpUglifyError: unable to minify JavaScript

 若是在執行中出現以上錯誤，說明js文件有錯，致使沒法壓縮。查看信息的話，修改代碼：

.pipe(uglify().on("error", function(error){
            console.log(error);
　　　　　　  this.emit('end'); //終止
        }))

 

便可查看錯誤起因，進行修改。 

 

使用 gulp 壓縮 CSS

css文件壓縮，要使用另外一個module ：gulp-clean-css     gulp-minify-css（被廢除） 

npm install gulp-clean-css

 

 JS完整壓縮代碼：

// 獲取 minify-css 模塊（用於壓縮 CSS）
var minifyCSS = require('gulp-minify-css')

// 壓縮 css 文件
// 在命令行使用 gulp css 啓動此任務
gulp.task('css', function () {
    // 1. 找到文件
    gulp.src('css/*.css')
    // 2. 壓縮文件
        .pipe(minifyCSS())
    // 3. 另存爲壓縮文件
        .pipe(gulp.dest('dist/css'))
})

// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 css 任務
    gulp.watch('css/*.css', ['css'])
});

 

使用 gulp 壓縮 Image

img圖片壓縮，要使用到的工具 gulp-imagemin：

npm install gulp-imagemin

 

Js壓縮代碼：

// 獲取 gulp-imagemin 模塊
var imagemin = require('gulp-imagemin')

// 壓縮圖片任務
// 在命令行輸入 gulp images 啓動此任務
gulp.task('images', function () {
    // 1. 找到圖片
    gulp.src('images/*.*')
    // 2. 壓縮圖片
        .pipe(imagemin({
            progressive: true
        }))
    // 3. 另存圖片
        .pipe(gulp.dest('dist/images'))
});

// 在命令行使用 gulp auto 啓動此任務
gulp.task('auto', function () {
    // 監聽文件修改，當文件被修改則執行 images 任務
    gulp.watch('images/*.*)', ['images'])
});

使用 gulp 壓縮html

 安裝gulp-htmlmin

npm install gulp-htmlmin –save-dev

說明：–save-dev 保存配置信息至 package.json 的 devDependencies 節點。

僅可處理html內容 js和css會保存原樣輸出，但會剔除空白行。

注意：header中出現的註釋 <!-- ** -->會影響編輯，報錯。

var  htmlmin = require('gulp-htmlmin');

gulp.task('testHtmlmin', 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/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

 

使用 gulp 合併壓縮 html

安裝gulp-useref：

npm install --save gulp-useref

useref僅合併代碼（剔除註釋）不作壓縮，所以能夠將上面的幾個整合進去。

使用：

var useref = require('gulp-useref');


gulp.task('html', function () {
    return gulp.src('app/*.html')
        .pipe(useref())
        .pipe(gulpif('*.js', uglify()))
        .pipe(gulpif('*.css', minifyCss()))
        .pipe(gulp.dest('dist'));
});

 使用gulp 建立 web項目

 首先建立web項目的項目文件夾。

而後進入，執行如下命令建立package.json文件。

npm init

 

其中會提示填寫 name，version ,  description ,git等信息。

若是出現錯誤：Sorry, name can no longer contain capital letters.不能輸入大寫字母

順着一路走下去，就會生成package.json文件。

package.json文件中加入gulp模塊。--save-dev 將gulp保存到package.json文件中。

npm install --save-dev gulp

 

 執行完畢後，會在項目下有個文件夾 node_modules。用於存放node 模塊，全部安裝的模塊會被安裝在此文件夾下。

同時安裝相關的模塊。

npm install gulp-uglify --save-dev

 

 package.json文件中會自動記錄dependencies。這樣聯合開發時，咱們不須要提交node_modules文件裏面的內容。

相關開發者只需下載package.json.執行 npm install 就會自動將相關文件下載到本地。和maven的lib管理同樣。

此時建立文件結構：

|-src
　　|-html
　　|-img
　　|-css
　　|-js
|-dist

src用於存放開發用代碼，dist用於存放發佈後代碼。

※若是有 less sass typescript文件都放在src下。

 在src下建立demo index.html  index.js  index.css img文件。

而後引入 gulpfile.js作自動化部署用。

gulp-util 已經被標註爲@Declared 不被推薦所以，就不引入了。

加入gulp-uglify壓縮JS模塊，到gulpfile.js中。

var gulp = require('gulp');
var uglify  = require('gulp-uglify');

/**
 * js 壓縮
 */
gulp.task('js', function(){
    gulp.src('src/js/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

gulp.task('auto', function(){
    gulp.watch('src/js/*.js', ['js']);
});

gulp.task('default', ['js','auto']);

 

>gulp

 

此時，修改index.js文件，gulp.watch會當即監控到js文件夾下有文件變動，從而執行'js'任務。可是咱們每改個文件都全量發佈一次，不是咱們想要的，咱們但願增量發佈。

引入  gulp-watch-path 模塊

npm install gulp-watch-path --save-dev

 

此模塊可作增量發佈，解決咱們上面提到的困境。

如下代碼中被註釋的部分，是爲了說明對象的主要結構。

var watchpath = require('gulp-watch-path');

gulp.watch('src/js/*.js', function(event){
        /*  event對象結構
        event {
            type: 'changed', 
            path: '/Users/nimojs/Documents/code/gulp-book/demo/chapter7/src/js/log.js'
        }
        */
        var paths = watchpath(event, 'src/', 'dist/');
        /*
        paths  paths對象結構
            { srcPath: 'src/js/log.js',
              srcDir: 'src/js/',
              distPath: 'dist/js/log.js',
              distDir: 'dist/js/',
              srcFilename: 'log.js',
              distFilename: 'log.js' }
        */  
       console.log("eventType: " + event.type);
       console.log("srcFilename: " + paths.srcFilename);
       gulp.src(paths.srcPath)
           .pipe(uglify())
           .pipe(gulp.dest(paths.distDir));
    });

 

同時，當咱們在執行統一執行時，若是其中有的js有問題，會致使報錯且執行被終止，報出的錯又無法找出緣由，須要手動在uglify中添加監聽error事件並打印查看問題。

咱們更多時候但願對於出錯的地方，跳過繼續執行，最後再單獨處理錯誤文件作增量修改便可。

引入 stream-combiner2 模塊

此模塊能夠記錄打印錯誤log日誌，同時不會中斷執行。

npm install stream-combiner2 --save-dev

 

combiner將要執行的編輯拆分開，用於在內部組合。

var combiner = require('stream-combiner2');

var logFn = function(er){
    /**
         er {
             message: '',
            fileName: '',
             plugin: '',
             lineNumber: ''
               }
    */
    console.error("Error!");
    console.error("er  plugin:  " + er.plugin);
    console.error("er  fileName:  " + er.fileName);
    console.error("er  lineNumber:  " + er.lineNumber);
    console.error("er  message:  " + er.message);
}

---------------------------------------------------------------
// 將 watch 中的 src部分變爲如下結構。

 combiner.obj([
               gulp.src(paths.srcPath),
                   uglify(),
                   gulp.dest(paths.distDir) 
           ]).on('error', logFn);

 

修改index.js使其語法報錯。執行後結果：

當咱們運行index.html進行調試時，會發現因壓縮後js已經沒法辨認，致使沒法調試。

引入  gulp-sourcemaps 模塊

gulp-sourcemaps模塊可作代碼映射，就如同eclipse中class映射到java類上同樣。

npm install gulp-sourcemaps --save-dev

 

在進行uglify以前注入sourcemaps，在以後加入轉變

var sourcemaps = require('gulp-sourcemaps');

// 在watch部分修改
       combiner.obj([
               gulp.src(paths.srcPath),
                   sourcemaps.init(),
                   uglify(),
                   sourcemaps.write("./"),
                   gulp.dest(paths.distDir) 
           ]).on('error', logFn);

 

index.js修改後，會在dist/js下生成相對應的.map文件進行映射，在chrome瀏覽器下自動綁定。

對於css文件，咱們對於一個樣式要兼容不一樣瀏覽器內核的不一樣寫法，非常不便。

引入 gulp-autoprefixer 模塊

自動補齊不一樣瀏覽器內核的寫法，這樣咱們只須要按標準寫法便可。

>npm install gulp-minify-css --save-dev
>npm install gulp-autoprefixer --save-dev

 

添加如下代碼：

var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('css', function(){
    gulp.src('src/css/*.css')
        .pipe(autoprefixer({ browsers: 'last 2 versions'}))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css'));
});

 

則會在dist的css文件中,自動添加：

src/css

#container{
display: flex;
}

----------------------------

dist/css

#container{display:-webkit-box;display:-ms-flexbox;display:flex}

對非css,js文件直接進行搬遷，如font文件

gulp.task('copy',function(){
    gulp.src('src/font/*')
    .pipe(gulp.dest('dist/font/'));
});