參考鏈接：https://www.cnblogs.com/2050/p/4198792.html
在前端的工程化過(guò)程中，我們會(huì)有壓縮代碼，壓縮圖片，版本控制等需求。
那么我們?cè)撛趺唇鉀Q這些問(wèn)題呢？這時(shí)候我們就可以使用gulp。

一、gulp文件生成

原始項(xiàng)目結(jié)構(gòu)

首先我們要生成一個(gè)package.json文件，這個(gè)文件用于管理本地安裝的npm包。
其中的dependencies或devDependencies（開(kāi)發(fā)環(huán)境）字段就是模塊依賴的清單，每次npm update或者npm install都會(huì)自動(dòng)把dependencies或devDependencies（開(kāi)發(fā)環(huán)境）里面依賴的模塊進(jìn)行更新或下載安裝。我們?cè)诮酉聛?lái)的例子中都以開(kāi)發(fā)環(huán)境為例。
那么如何生成一個(gè)package.json呢？在終端中運(yùn)行以下命令：

npm init

接下來(lái)會(huì)跳出一系列信息讓你填寫(xiě)（name，version，description等），可以按照自己實(shí)際情況填寫(xiě)，沒(méi)有就一直enter就行了。

生成package.json之后的項(xiàng)目結(jié)構(gòu)

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

可以看到現(xiàn)在package.json里面還沒(méi)有devDependencies，接下來(lái)我們安裝gulp，運(yùn)行以下命令：

npm install --save-dev gulp

如果希望全局安裝，則運(yùn)行：

npm install --global gulp

注意：記得加上--save-dev，如果不加，package.json里面不會(huì)自動(dòng)添加模塊清單，需要自己手動(dòng)添加。

安裝gulp之后的項(xiàng)目結(jié)構(gòu)

node_modules里面就是已經(jīng)安裝的npm包。
package-lock.json用于鎖定安裝時(shí)的包的版本號(hào)，并且需要上傳到git，以保證其他人在npm install時(shí)大家的依賴能保證一致。

可以看到package.json里面的devDependencies多了gulp模塊以及其版本號(hào)。

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "gulp": "^3.9.1"
  }
}

接下來(lái)我們自己新建一個(gè)gulpfile.js。

新建gulp.js

至此，我們的gulp文件生成都已經(jīng)完成啦！

二、gulpfile.js基本語(yǔ)法

在gulp中，使用的是Nodejs中的stream流，首先獲取到需要的stream，然后可以通過(guò)stream的pipe()方法把流導(dǎo)入到下一步。

我們先了解一下gulp的幾個(gè)重要的api。

gulp.src(globs[, options])：用來(lái)獲取流，用這個(gè)方法讀取需要操作的文件。
globs參數(shù)是文件匹配模式(類似正則表達(dá)式)，用來(lái)匹配文件路徑(包括文件名)，這里也可以直接指定某個(gè)具體的文件路徑。當(dāng)有多個(gè)匹配模式時(shí)，該參數(shù)可以為一個(gè)數(shù)組，如gulp.src(['js/*.js','css/*.css','*.html'])。

匹配規(guī)則

匹配例子

gulp.dest(path[,options])：定義文件輸出的位置，是一個(gè)文件夾。
path為寫(xiě)入文件的路徑。給gulp.dest()傳入的路徑參數(shù)，只能用來(lái)指定要生成的文件的目錄，而不能指定生成文件的文件名，它生成文件的文件名使用的是導(dǎo)入到它的文件流自身的文件名，所以生成的文件名是由導(dǎo)入到它的文件流決定的，即使我們給它傳入一個(gè)帶有文件名的路徑參數(shù)，它也會(huì)把這個(gè)文件名當(dāng)做是目錄名。
gulp.task(name[, deps], fn)：用來(lái)定義任務(wù)。
name 為任務(wù)名。deps 是當(dāng)前定義的任務(wù)需要依賴的其他任務(wù)，為一個(gè)數(shù)組。當(dāng)前定義的任務(wù)會(huì)在所有依賴的任務(wù)執(zhí)行完畢后才開(kāi)始執(zhí)行。如果沒(méi)有依賴，則可省略這個(gè)參數(shù)。fn 為任務(wù)函數(shù)，我們把任務(wù)要執(zhí)行的代碼都寫(xiě)在里面。該參數(shù)也是可選的。
gulp.watch(glob[, opts], tasks)：用來(lái)監(jiān)視文件的變化，當(dāng)文件發(fā)生變化后，我們可以利用它來(lái)執(zhí)行相應(yīng)的任務(wù)，例如文件壓縮等。
glob 為要監(jiān)視的文件匹配模式，規(guī)則和用法與gulp.src()方法中的glob相同。opts 為一個(gè)可選的配置對(duì)象，通常不需要用到。tasks 為文件變化后要執(zhí)行的任務(wù)，為一個(gè)數(shù)組。

接下來(lái)我們開(kāi)始寫(xiě)代碼：

var gulp = require('gulp')

gulp.task('default', function () {
  console.log('gulp!')
})

在終端中切換到項(xiàng)目根目錄下，直接運(yùn)行g(shù)ulp命令，沒(méi)有指定任務(wù)名字，就會(huì)執(zhí)行default任務(wù)，輸出'gulp!'字符串。

三、常用的插件

gulp-load-plugins：要使用gulp的插件，首先得用require來(lái)把插件加載進(jìn)來(lái)，如果我們要使用的插件非常多，gulpfile文件就會(huì)變得十分冗長(zhǎng)。gulp-load-plugins這個(gè)插件能自動(dòng)幫你加載package.json文件里的gulp插件。比如我們要使用gulp-rename和gulp-ruby-sass這兩個(gè)插件的時(shí)候，就可以使用plugins.rename和plugins.rubySass來(lái)代替了,也就是原始插件名去掉gulp-前綴，之后再轉(zhuǎn)換為駝峰命名。

安裝：

npm install --save-dev gulp-load-plugins

引入并立即執(zhí)行：

var plugins = require('gulp-load-plugins')()

gulp-rename：給文件重命名。

安裝：

npm install --save-dev gulp-rename

使用：

gulp.task('rename', function () {
  return gulp.src('./index.html')
  .pipe(plugins.rename('index-rename.html'))
  .pipe(gulp.dest('./dist'))
})

在終端中運(yùn)行命令：

gulp rename

重命名文件

注意：我在這里使用了gulp-load-plugins插件，用法見(jiàn)第1點(diǎn)。如果不使用gulp-load-plugins，可以自己引入gulp-rename并使用，以下插件類似。

gulp-minify-html：壓縮html文件。

安裝：

npm install --save-dev gulp-minify-html

使用：

gulp.task('minifyHtml', function () {
  return gulp.src('./index.html')
  .pipe(plugins.minifyHtml())
  .pipe(plugins.rename({suffix: '.min'}))
  .pipe(gulp.dest('./dist'))
})

在終端中運(yùn)行命令：

gulp minifyHtml

壓縮html并在dist生成

可以看到代碼中先把html代碼壓縮，然后重命名加.min后綴，最后輸出在dist文件夾。

gulp-minify-css：壓縮css文件。

安裝：

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

使用：

gulp.task('minifyCss', function () {
  return gulp.src('./css/*.css')
  .pipe(plugins.minifyCss())
  .pipe(plugins.rename({suffix: '.min'}))
  .pipe(gulp.dest('./dist/css'))
})

在終端中運(yùn)行命令：

gulp minifyCss

壓縮css文件，并在dist下面的css文件夾輸出

gulp-uglify：壓縮js文件。

安裝：

npm install --save-dev gulp-uglify

使用：

gulp.task('minifyJs', function () {
  return gulp.src('./js/*.js')
  .pipe(plugins.uglify())
  .pipe(plugins.rename({suffix: '.min'}))
  .pipe(gulp.dest('./dist/js'))
})

在終端中運(yùn)行命令：

gulp minifyJs

壓縮js文件，并在dist下面的js文件夾輸出

gulp-imagemin：壓縮圖片文件。

安裝：

npm install --save-dev gulp-imagemin

使用：

gulp.task('minifyImg', function () {
  return gulp.src('./img/*')
  .pipe(plugins.imagemin())
  .pipe(gulp.dest('./dist/img'))
})

在終端中運(yùn)行命令：

gulp minifyImg

壓縮圖片文件，并在dist下面的img文件夾輸出

gulp-clean：清空文件夾及其文件。

安裝：

npm install --save-dev gulp-clean

使用：

gulp.task('clean', function () {
  return gulp.src('./dist')
  .pipe(plugins.clean())
})

在終端中運(yùn)行命令：

gulp clean

clean之后清空了dist文件夾

run-sequence：串行執(zhí)行任務(wù)，也就是按順序執(zhí)行。
我們之前的例子都可以并行執(zhí)行，但是如果一個(gè)任務(wù)的執(zhí)行依賴于另一個(gè)任務(wù)的執(zhí)行結(jié)果，就需要串行執(zhí)行任務(wù)。

安裝：

npm install --save-dev run-sequence

使用：

var runSequence = require('run-sequence')
gulp.task('init', function () {
  runSequence(
    'clean',
    ['minifyCss', 'minifyJs', 'minifyImg'],
    'minifyHtml'
  )
})

在終端中運(yùn)行命令：

gulp init

任務(wù)流

可以看到在任務(wù)流中，先執(zhí)行了clean任務(wù)，再執(zhí)行了minifyCss，minifyJs，minifyImg任務(wù)，最后執(zhí)行minifyHtml任務(wù)。

gulp-babel和babel-core：將ES6代碼轉(zhuǎn)化為ES5代碼。

安裝：

npm install --save-dev gulp-babel babel-preset-es2015
npm install --save-dev babel-core

使用：

gulp.task('babel', function () {
  return gulp.src('./js/*.js')
  .pipe(plugins.babel({presets: ['es2015']}))
  .pipe(gulp.dest('./dist/es5'))
})

在終端中運(yùn)行命令：

gulp babel

編譯前的ES6代碼：

let [a, [b, c], d] = [1, [2, 3], 4]
console.log(a)
console.log(b)
console.log(c)
console.log(d)

編譯后的ES5代碼：

"use strict";

var a = 1,
    b = 2,
    c = 3,
    d = 4;

console.log(a);
console.log(b);
console.log(c);
console.log(d);

gulp-rev和gulp-rev-collector：用于版本控制，原理是給js和css文件后面加hash字符串，生成一個(gè)json文件，并根據(jù)json文件在html里面替換。

安裝：

npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

使用：

gulp.task('minifyJs', function () {
  return gulp.src('./js/*.js')
  .pipe(plugins.uglify())
  .pipe(plugins.rev())
  .pipe(gulp.dest('./dist/js'))
  .pipe(plugins.rev.manifest())
  .pipe(gulp.dest('./rev/js'))
})

gulp.task('minifyHtml', function () {
  return gulp.src(['./rev/**/*.json', './index.html'])
  .pipe(plugins.minifyHtml())
  .pipe(plugins.revCollector())
  .pipe(gulp.dest('dist'))
})

在終端中運(yùn)行之前初始化命令：

gulp init

版本控制

rev()用于給js文件或者css文件加hash串后綴。
rev.manifest()用于生成json文件，這個(gè)json文件是后面替換html中路徑的規(guī)則。
revCollector()根據(jù)json文件替換html中的資源路徑。

————
前端·小w
紙上學(xué)來(lái)終覺(jué)淺，絕知此事要躬行

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

gulp的簡(jiǎn)單使用

gulp的簡(jiǎn)單使用

一、gulp文件生成

二、gulpfile.js基本語(yǔ)法

三、常用的插件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

gulp的簡(jiǎn)單使用

一、gulp文件生成

二、gulpfile.js基本語(yǔ)法

三、常用的插件

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

一、gulp文件生成

三、常用的插件