前端建構工具gulp安裝（整理補充）

第1步：安裝Node

首先，最基本也最重要的是，我們需要搭建node環境。通路 nodejs.org，然後點選大大的綠色的 install 按鈕，下載下傳完成後直接運作程式，就一切準備就緒。npm會随着安裝包一起安裝，稍後會用到它。

為了確定Node已經正确安裝，我們執行幾個簡單的指令。

node -v
npm -v

如果這兩行指令沒有得到傳回，可能node就沒有安裝正确，進行重裝。

第2步：安裝gulp

首先我們要全局安裝一遍：

npm install -g gulp

運作時注意檢視指令行有沒有錯誤資訊，安裝完成後，你可以使用下面的指令檢視gulp的版本号以確定gulp已經被正确安裝。

接着我們在項目的根目錄手動添加一個package.js檔案，在package.json檔案裡寫如下的格式：

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {

  }
}

然後在cmd裡進入到項目的根目錄，輸入如下指令

就會發現項目的根目錄裡面多了【node_modules】檔案夾，裡面增加了gulp的檔案夾。同時package.json檔案裡的【devDependencies】裡面多了一行關于gulp的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
      "gulp": "^3.9.0" //新增一行gulp的版本号
  }
}

第3步：建立gulpfile.js檔案

我們将要使用Gulp插件來完成我們以下任務：

sass的編譯（gulp-sass）
自動添加css字首（gulp-autoprefixer）
壓縮css（gulp-minify-css）
壓縮html（gulp-minify-html）
js代碼校驗（gulp-jshint）
合并js檔案（gulp-concat）
壓縮js代碼（gulp-uglify）
壓縮圖檔（gulp-imagemin）
自動重新整理頁面（gulp-livereload）
圖檔緩存，隻有圖檔替換了才壓縮（gulp-cache）
更改提醒（gulp-notify）

安裝這些插件需要運作如下指令：

補充：安裝jshint報錯解決方法：npm install –save-dev jshint gulp-jshint

更多插件可以看這裡gulpjs.com/plugins/

【node_modules】檔案夾，裡面增加了n個插件檔案夾。package.js檔案裡的【devDependencies】裡面多了n行插件的版本号

{
  "name": "gulp_test",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-autoprefixer": "^3.0.2",
    "gulp-cache": "^0.3.0",
    "gulp-concat": "^2.6.0",
    "gulp-imagemin": "^2.3.0",
    "gulp-jshint": "^1.11.2",
    "gulp-livereload": "^3.8.1",
    "gulp-minify-css": "^1.2.1",
    "gulp-minify-html": "^1.0.4",
    "gulp-notify": "^2.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.0.4",
    "gulp-uglify": "^1.4.1"
  }
}

接着我們要建立一個gulpfile.js在根目錄下，gulp隻有四個API： task，watch，src，和 dest

【task】這個API用來建立任務，在指令行下可以輸入 gulp test 來執行test的任務。

【watch】這個API用來監聽任務。

【src】這個API設定需要處理的檔案的路徑，可以是多個檔案以數組的形式

[main.scss,vender.scss]

，也可以是正規表達式

*.scss

。

【dest】這個API設定生成檔案的路徑，一個任務可以有多個生成路徑，一個可以輸出未壓縮的版本，另一個可以輸出壓縮後的版本。

簡單的項目目錄結構

project(項目名稱)

|–node_modules          元件目錄
|–dist                  釋出環境
    |–css               樣式檔案(style.css style.min.css)
    |–js                js檔案(main.js main.min.js)
|–src 生産環境
    |–sass              sass檔案
    |–js                js檔案
|–gulpfile.js           gulp任務檔案
|–package.json          依賴gulp子產品

編寫gulp任務

// 引入 gulp及元件
var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-minify-css'),
    minifyhtml = require("gulp-minify-html"),
    jshint = require('gulp-jshint'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    livereload = require('gulp-livereload');


// Styles任務
gulp.task('styles', function() {
    //編譯sass
    return gulp.src('src/css/*.scss')
        .pipe(sass())
        //儲存未壓縮檔案到我們指定的目錄下面
        .pipe(gulp.dest('src/css'))
        //給檔案添加.min字尾
        .pipe(rename({ suffix: '.min' }))
        //壓縮樣式檔案
        .pipe(minifycss())
        //輸出壓縮檔案到指定目錄
        .pipe(gulp.dest('dist/css'))
        //提醒任務完成
        .pipe(notify({ message: 'CSS task complete' }));
});

// Scripts任務
gulp.task('scripts', function() {
    //js代碼校驗
    return gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        //js代碼合并
        //.pipe(concat('all.js'))
        //給檔案添加.min字尾
        .pipe(rename({ suffix: '.min' }))
        //壓縮腳本檔案
        .pipe(uglify())
        //輸出壓縮檔案到指定目錄
        .pipe(gulp.dest('dist/js'))
        //提醒任務完成
        .pipe(notify({ message: 'JS task complete' }));
});

// Default task
gulp.task('default', function() {
    gulp.start('styles', 'scripts','watch');
});
// Watch
gulp.task('watch', function() {
    // Watch .scss files
    gulp.watch('src/css/*.scss', ['styles']);
    // Watch .js files
    gulp.watch('src/js/*.js', ['scripts']);
    // Create LiveReload server
    livereload.listen();
    // Watch any files in assets/, reload on change
    gulp.watch(['dist/*']).on('change', livereload.changed);
});

補充gulp插件

自動重新整理

可以結合browser-sync做多終端自動重新整理，詳見BrowserSync前端測試利器

處理html

使用gulp-processhtml

安裝：npm install –save-dev gulp-processhtml

在建構時處理按你設想的修改html檔案，比如說你建構之前你有N個腳本需要引入到html頁面中，建構之後可能這N個檔案被合并成了一個，這時候引入的地方也需要做相應的調整，那麼差個插件就能派上用場了。

插件使用

gulp.task("processhtml", function () {
    gulp.src('../main.html')
        .pipe(processhtml())
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html建構之前的代碼

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<!-- build:js js/libs/libs.min.js --> <!--process-html插件需要用到這個注釋-- >
<script src="js/libs/angular.min.js"></script>
<script src="js/libs/angular.touch.min.js"></script>
<script src="js/libs/zepto.20140520.js"></script>
<script src="js/libs/angular.ui.bootstrap.js"></script>
<script src="js/libs/angular-sanitize.min.js"></script>
<script src="js/libs/angular-ui-route.min.js"></script>
<script src="js/libs/fastclick.0.6.7.min.js"></script>
<script src="js/libs/carous.min.js"></script>
<!-- /build --> <!--process-html插件需要用到這個注釋-->
</html>

main.html建構之後

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?/>
    <link rel="stylesheet" href="style/index.css?/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/libs/libs.min.js"></script> <!--注意這裡的變化-->
</html>

字元串替換（修改檔案版本号）

使用gulp-replace

安裝：npm install –save-dev gulp-replace

可以替換html或者txt等檔案内的字元串為你想要的。

比如我每次建構的時候都需要去修改引用的檔案的版本号，就可以使用這個插件

gulp.task("replace", function () {
    var date = new Date().getTime();
    gulp.src('../main.html')
        .pipe(replace(/_VERSION_/gi, date))
        .pipe(gulp.dest(option.buildPath + '/'))
})

main.html檔案

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=_VERSION_"/>
    <link rel="stylesheet" href="style/index.css?v=_VERSION_"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=_VERSION_"></script>
<script src="js/app.js?v=_VERSION_"></script>
<script src="js/service/TrackDataService.js?v=_VERSION_"></script>
<script src="js/service/APIService.js?v=_VERSION_"></script>
<script src="js/service/DService.js?v=_VERSION_"></script>
<script src="js/controllers/indexCtrl.js?v=_VERSION_"></script>
<script src="js/directive/lazy.js?v=_VERSION_"></script>
<script src="js/directive/slider.js?v=_VERSION_"></script>
<script src="js/filter/filters.js?v=_VERSION_"></script>
</html>

建構之後，

_VERSION_

被替換為時間戳。

<!DOCTYPE html>
<html ng-app="app">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <link rel="stylesheet" href="style/base.css?v=1433405631860"/>
    <link rel="stylesheet" href="style/index.css?v=1433405631860"/>
</head>
<body>
<ui-view></ui-view>
</body>
<script src="js/config/config.js?v=1433405631860"></script>
<script src="js/app.js?v=1433405631860"></script>
<script src="js/service/TrackDataService.js?v=1433405631860"></script>
<script src="js/service/APIService.js?v=1433405631860"></script>
<script src="js/service/DService.js?v=1433405631860"></script>
<script src="js/controllers/indexCtrl.js?v=1433405631860"></script>
<script src="js/directive/lazy.js?v=1433405631860"></script>
<script src="js/directive/slider.js?v=1433405631860"></script>
<script src="js/filter/filters.js?v=1433405631860"></script>
</html>

使用 gulp.dest 複制目錄結構

假設我們的目錄結構是這樣的
├── src/
│     └── vendor/
│            └── jquery.js
└── gulpfile.js

我們需要複制 jquery.js 到 dest 目錄, 并保持 jquery.js 原有的目錄層次結構

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

// 一般我們是這樣複制檔案的
gulp.src('./src/vendor/jquery.js')
    .pipe(gulp.dest('dest'));

但得到的結果不符合我們的預期, 隻是單純的 copy 了檔案, 目錄結構沒有複制過來
├── src/
└── dest/
       └── jquery.js

// 當我們加上 base 參數後
gulp.src('./src/vendor/jquery.js', {base: '.'})
    .pipe(gulp.dest('dest'));

接近我們想要結果了, 連同目錄結構都複制了過來
├── src/
└── dest/
       └── src/
              └── vendor/
                     └── jquery.js

// 我們可以再修改下 base 以去掉 src 這一層
gulp.src('./src/vendor/jquery.js', {base: './src'})
    .pipe(gulp.dest('dest'));

最終的結果
├── src/
└── dest/
       └── vendor/
              └── jquery.js

前端建構工具gulp安裝（整理補充）

第1步：安裝Node

第2步：安裝gulp

第3步：建立gulpfile.js檔案

編寫gulp任務

補充gulp插件

自動重新整理

處理html

字元串替換（修改檔案版本号）

使用 gulp.dest 複制目錄結構

繼續閱讀

前段自動化工具gulp安裝、使用和調試

Gulp的使用gulp

gulp--快速入門

gulp插件簡介

gulp入門系列之一：問題記錄

Gulp建構案例

Gulp 入門，就是這麼簡單

gulp 入門

gulp學習筆記0 起因1 簡述2 gulp的API

使用gulp時常用的插件介紹及用法

由于MIME類型未加載樣式表

gulp自動化建構流程什麼是gulp

gulp自動化建構

基于 gulp 的自動化建構之“靜态資源版本管理”--2017年12月"gulp-rev"版本8.1.0

一篇文章讓你搞懂前端自動化建構工具gulp導語1.什麼是gulp，gulp有什麼用2.與其他工具的對比3.gulp的安裝：4.API簡介：尾語

gulp 重命名 vue-cli3的釋出檔案