gulp 使用入門

什麼是gulp?

用自動化構建工具加強你的工做流程！
Gulp 是基於node.js的一個前端自動化構建工具，開發者能夠使用它構建自動化工做流程（前端集成開發環境）。
使用gulp你能夠簡化工做量，讓你把重點放在功能的開發上，從而提升你的開發效率和工做質量。
例如：你能夠用gulp能夠網頁自動刷新，和MVVM開發模式很類似。你也能夠使用gulp對sass進行預處理、代碼檢測、圖片優化壓縮、只須要一個簡單的指令就能所有完成。

中文網

全局安裝 gulp

$ npm install --global gulp

做爲項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

爲 gulp 安裝插件(讀取 package.json 文件下所需的插件)

$ npm install --save-dev

在項目根目錄下建立一個名爲 gulpfile.js 的文件：

var gulp = require('gulp');
gulp.task('default', function() {
  // 將你的默認的任務代碼放在這
});

運行 gulp：

$ gulp

默認的名爲 default 的任務（task）將會被運行，在這裏，這個任務並未作任何事情。

想要單獨執行特定的任務（task），請輸入gulp <task> <othertask>。

gulpfile.js示例

var gulp = require('gulp')
    cssmin = require('gulp-minify-css')             //css壓縮
    uglify = require('gulp-uglify')               //js壓縮
    javascriptObfuscator = require('gulp-javascript-obfuscator') // js混淆
    imagemin = require('gulp-imagemin')            //圖片的壓縮
    base64 = require('gulp-base64')                //- 把小圖片轉成base64字符串
    htmlmin = require('gulp-htmlmin')              //html的壓縮
    babel = require('gulp-babel')
    rename = require("gulp-rename")
 
//壓縮  css文件   和base64 和文件名加md5後綴
gulp.task('testCssmin', function () {
    gulp.src('original/css/*.css')
        .pipe(base64())
        // .pipe(rev())               //文件名加md5後綴
        .pipe(cssmin())
        // .pipe(rev.manifest())　　　　　　　　 //rev-mainfest.json文件，裏面是壓縮文件的信息
        .pipe(gulp.dest('dist/css'));
});
 
// 壓縮 js 文件
gulp.task('script', function() {
    // 1. 找到文件
    gulp.src('original/js/*.js')
        .pipe(babel())
    // 2. 壓縮文件
        .pipe(uglify())
    // 3. 混淆js
        .pipe(javascriptObfuscator({
          compact:true,
          selfDefending:true
        }))
    // 4. 都添加.min.js後綴
        .pipe(rename({suffix: '.min'}))
    // 5. 另存壓縮後的文件
        .pipe(gulp.dest('dist/js/'))
})
//壓縮  img文件
gulp.task('testImagemin', function () {
    gulp.src('original/images/common/*.{png,jpg,gif,ico,svg}')
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
            progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true //類型：Boolean 默認：false 屢次優化svg直到徹底優化
        }))
        .pipe(gulp.dest('dist/images/common'));
});
//壓縮html文件
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('original/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/'));
});
 
 
// 監聽文件的變化
/* gulp.task('watch', function() {
    livereload.listen();
    gulp.watch(['css/*.css'], ['testCssmin']);
    gulp.watch(['js/*.js'], ['script']);
    gulp.watch(['images/*.{png,jpg,gif,ico}'], ['testImagemin']);
    gulp.watch(['/*.html'], ['testHtmlmin']);
}); */
/* 合併上述個人方法 監控並執行任務 */
gulp.task('default', [
        //'testImagemin',
        'script',
        //'testCssmin',
        //'testHtmlmin',
    ]
);

package示例

{
  "name": "test",
  "version": "0.0.1",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^8.0.0",
    "gulp-base64": "^0.1.2",
    "gulp-concat": "^2.6.1",
    "gulp-htmlmin": "^4.0.0",
    "gulp-imagemin": "^4.1.0",
    "gulp-javascript-obfuscator": "^1.1.5",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-processhtml": "^1.2.0",
    "gulp-rev": "^8.1.1",
    "gulp-rev-collector": "^1.2.4",
    "gulp-uglify": "^3.0.0"
  },
  "dependencies": {
    "gulp-rename": "^1.4.0"
  }
}