基於gulp的前端自動化方案

前言

​ 最近幾年前端技術發展突飛猛進，特別是單頁應用的普及。組件化、工程化、自動化成了前端發展的趨勢。webpack已經成爲了前端打包構建的主流，可是一些老古董的項目仍是存在的，也有優化的必要，正好公司的老項目須要優化，很少說拿gulp實踐一下。

本文須要安裝node（自行安裝），並瞭解過gulp入門。gulp腳本下載：github.com/youhunwl/gu… 歡迎star。

實踐

建立項目目錄

首先初始化npm依賴項與基本信息，使用命令npm init一直回車，生成package.json文件，也能夠直接去上邊github倉庫目錄下載。

你的項目目錄關係到你的gulp腳本里的任務路徑，我腳本里寫的是匹配全部的目錄和文件。我簡單舉個例子：這裏js/common裏的js文件也會被處理。若是隻想處理特定目錄的文件，請修改任務裏的路徑。

demo/
├── css/
│   ├── index.css
├── js/
│   ├── common/
│   │       └─ common.js
│   ├── index.js
├── img/
│   ├── logo.png
└── index.html
複製代碼

安裝所需依賴

安裝gulp所須要的模塊，這裏直接列舉個人package.json文件內容

{
  "name": "demo",
  "version": "0.0.0",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cache": "^1.0.2",
    "gulp-clean-css": "^3.10.0",
    "gulp-htmlclean": "^2.7.15",
    "gulp-htmlmin": "^3.0.0",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^4.1.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-notify": "^3.0.0",
    "gulp-path": "^3.0.3",
    "gulp-rev-append": "^0.1.8",
    "gulp-sequence": "^0.4.6",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^2.0.0",
    "uglify-js": "^3.3.9"
  }
}

複製代碼

編寫gulp腳本

新建 gulpfile.js文件,並引入所需模塊，這裏我把路徑統一寫在PATHS中。具體關於路徑的寫法，能夠去看gulp官網的api：www.gulpjs.com.cn/docs/api/

gulp-minify-css這個官網提示已經棄用，改用gulp-clean-css，這裏保留只是爲了告訴你們，效果同樣，用戶一致，爲了保證項目不出問題，仍是用最新的吧。

'use strict';
var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),//壓縮css 已棄用
    cleancss = require('gulp-clean-css'),//壓縮css
    imagemin = require('gulp-imagemin'),//壓縮圖片
    autoprefixer = require('gulp-autoprefixer'),//處理瀏覽器前綴
    uglify = require('gulp-uglify'),//壓縮js
    sourcemaps = require('gulp-sourcemaps'),//生成 sourcemap
    gulpif = require('gulp-if'),//條件判斷
    notify = require('gulp-notify'),//處理報錯
    cache = require('gulp-cache'),//只壓縮修改的圖片
    htmlclean = require('gulp-htmlclean'),// 精簡html
	htmlmin = require('gulp-htmlmin'),//壓縮html
    rev = require('gulp-rev-append'),//增長版本號
    sequence = require('gulp-sequence'),//同步執行任務
    PATHS = {
    ROOT: './',
    DEST: './dist/',
    HTML: '**/*.{html,htm}',
    CSS: '**/*.css',
    IMG: '**/*.{png,jpg,gif,ico}',
    JS: '**/*.js'
}
複製代碼

壓縮處理css

這裏須要排除node_modules文件夾和生成構建的後的目錄/dist/及它們的子目錄，直接 !後面跟要排除的目錄就好了。

gulp.task('minify-css', function () {
    return gulp.src([PATHS.CSS,'!./dist/**', '!./node_modules/**'])
     .pipe(sourcemaps.init())
     .pipe(autoprefixer({
        browsers: ['last 10 versions', 'Firefox >= 20', 'Opera >= 36', 'ie >= 9', 'Android >= 4.0', ],
        cascade: true, //是否美化格式
        remove: false //是否刪除沒必要要的前綴
    }))
     .pipe(cleancss({
        keepSpecialComments: '*' //保留全部特殊前綴
    }))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'css minify complete' }));
});
複製代碼

有些引用的css或者js不須要壓縮,好比jQuery',Bootstrap，也或者是公司內部的公共庫 .min.{css,js}等等。

這裏我們就用到gulp-if了，去排除min.css

var conditionCss = function (f) {
    if (f.path.endsWith('.min.css')) {
        return false;
    }
    return true;
};
複製代碼

再修改下處理css的操做

.pipe(gulpif(conditionCss, cleancss({
    keepSpecialComments: '*' //保留全部特殊前綴
})))
複製代碼

壓縮處理js

同理排除下 min.js ，這裏還要注意記得把 gulp腳本也排除不處理。

gulp.task('minify-js', function () {
    return gulp.src([PATHS.JS, '!./dist/**', '!./node_modules/**', '!gulpfile.js'])
     .pipe(sourcemaps.init())
     .pipe(gulpif(conditionJs, uglify()))
     .pipe(sourcemaps.write('.'))
     .pipe(gulp.dest(PATHS.DEST))
     .pipe(notify({ message: 'js minify complete' }));
});
複製代碼

壓縮處理 img

gulp.task('minify-img', function () {
    return gulp.src([PATHS.IMG,'!./dist/**', '!./node_modules/**'])
        .pipe(cache(imagemin()))
        .pipe(gulp.dest(PATHS.DEST));
});
複製代碼

壓縮處理HTML

gulp.task('minify-html', function () {
    return gulp.src(PATHS.DEST+PATHS.HTML)
        .pipe(htmlclean())
        .pipe(htmlmin({
        removeComments: true, //清除HTML註釋
        collapseWhitespace: true, //壓縮HTML
        minifyJS: true, //壓縮頁面JS
        minifyCSS: true, //壓縮頁面CSS
        minifyURLs: true
    }))
        .pipe(gulp.dest(PATHS.DEST));
});
複製代碼

增長版本號

gulp.task('rev', function () {
    return gulp.src([PATHS.HTML,'!./dist/**', '!./node_modules/**'])
        .pipe(rev())
        .pipe(gulp.dest(PATHS.DEST));
});
複製代碼

同步執行task

由於gulp全部的任務都是異步完成的，在有時候咱們須要同步執行任務，好比：先編譯less,在對編譯好的css進行壓縮，這個時候異步就有問題了。

gulp.task('deploy', sequence(['minify-css', 'minify-js'], 'minify-img', 'rev', 'minify-html'));
複製代碼

執行gulp全部任務

這裏建立一個名爲default 的任務，執行上面的deploy任務

gulp.task('default', ['deploy'], function (e) {
    console.log("[complete] Please continue to operate");
})
複製代碼

部署

在終端中輸入 gulp或者gulp default執行構建，便可在咱們設置的產出目錄裏看到咱們壓縮處理後的代碼。

至此，一個簡單的gulp腳本就寫的差很少了，麻雀雖小五臟俱全。若是你們有什麼好的建議歡迎交流。