前端構(gòu)建工具Gulp.js 你知多少..(webpack/gulp/grunt)

@TOC

寫在前面

前幾天在更新webpack知識的時候，想起來三年前用過的前端構(gòu)建工具gulp/grunt,遂寫個筆記總結(jié)一下在抛，出來混總是要還的唠帝，忘得七七八八了...

閱讀本文章之前雀摘，相信你已經(jīng)對前端構(gòu)建工具(webpack赂鲤、gulp、grunt)有一定的認知和了解了棍掐，那么他們之間究竟有什么區(qū)別呢藏雏？

什么是gulp？

gulp文檔上面有這么一句話 $\color{blue} {用自動化構(gòu)建工具增強你的工作流程作煌！}$ 掘殴，也就是說 gulp是一個自動化構(gòu)建工具；
gulp的一些功能如下(包括但不限于):

自動化構(gòu)建工具gulp

gulp或grunt和webpack的區(qū)別

其實Webpack和另外兩個并沒有太多的可比性

Gulp/Grunt是一種能夠優(yōu)化前端的開發(fā)流程的工具粟誓，而WebPack是一種模塊化的解決方案奏寨，不過Webpack的優(yōu)點使得Webpack在很多場景下可以替代Gulp/Grunt類的工具。
Grunt和Gulp的工作方式是：在一個配置文件中鹰服，指明對某些文件進行類似編譯病瞳，組合揽咕，壓縮等任務(wù)的具體步驟，工具之后可以自動替你完成這些任務(wù)套菜。

Grunt和Gulp的工作流程
Webpack的工作方式是：把你的項目當(dāng)做一個整體亲善，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件逗柴，使用loaders處理它們蛹头，最后打包為一個（或多個）瀏覽器可識別的JavaScript文件。

Webpack的工作方式

上述內(nèi)容轉(zhuǎn)自@zhangwang的入門Webpack戏溺，看這篇就夠了

gulp起步

傻瓜式起步照搬官網(wǎng)文檔
1.安裝

// 全局安裝
$ npm install -g gulp
或者
$ npm install --global gulp

// 作為項目的開發(fā)依賴（devDependencies）安裝：
$ npm install --save-dev gulp

2.在項目根目錄下創(chuàng)建一個名為 gulpfile.js 的文件：

var gulp = require('gulp');

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

3.運行 gulp：

$ gulp

默認的名為 default 的任務(wù)（task）將會被運行渣蜗，在這里，這個任務(wù)并未做任何事情旷祸。
具體詳情可以查看gulpjs.com文檔

項目搭建

新建一個項目gulp-test
環(huán)境:

$ node -v // v9.1.0
$ npm -v // 6.5.0

1.新建文件以下文件如下

gulp-test/
          css/
               index.scss
           js/
               helloworld.js
           index.html
           gulpfile.js

其中 gulpfile.js 是我們gulp的配置文件袍睡，啟動gulp默認會找個這個文件并執(zhí)行；
2.接下來安裝依賴

$ npm init

一直按回車Enter初始化package.json文件(小技巧: npm iniy -y 可以免去繁瑣的enter步驟)
此時我們的目錄結(jié)構(gòu)是這樣了

gulp-test/
          css/
               index.scss
           js/
               helloworld.js
           index.html
           gulpfile.js
           package.json

安裝依賴

npm i --save-dev gulp        // gulp自動化構(gòu)建工具
npm i --save-dev gulp-uglify //js壓縮
npm i --save-dev gulp-concat //文件合并
npm i --save-dev gulp-jshint //js語法檢測
npm i --save-dev gulp-rename //文件重命名
npm i --save-dev gulp-sass //sass編譯工具
npm i --save-dev gulp-minify-css //css壓縮
npm i --save-dev del       //文件刪除
// 以下三選一
npm i --save-dev gulp-connect       // 自動刷新頁面
npm i --save-dev  browser-sync       // 自動刷新頁面
npm i --save-dev gulp-livereload       // 自動刷新頁面

這里頁面實時刷新只講這個gulp-connect 肋僧，其他詳情可以參照Browsersync和文章gulp-livereload

安裝完依賴后配置gulpfile.js如下:

// 定義依賴項和插件
const gulp=require('gulp');
const  uglify=require('gulp-uglify'); //js壓縮
const  concat=require('gulp-concat'); //文件合并
const jshint = require('gulp-jshint'); //js語法檢測
const rename = require('gulp-rename'); // 重命名
const sass = require('gulp-sass'); // 編譯scss
const  minifycss = require('gulp-minify-css'); // 壓縮css
// const livereload = require('gulp-livereload'); // 自動刷新頁面
const  del = require('del'); //文件刪除
const connect = require('gulp-connect'); // 自動刷新頁面

gulp.task('server', function() {
  connect.server({
    port: 8080, //指定端口號，在瀏覽器中輸入localhost:8080就可以直接訪問生成的html頁面
    root: './', //指定html文件起始的根目錄
    livereload: true //啟動實時刷新功能（配合上邊的connect.reload()方法同步使用）
  });
});

// 定義名為 "my-task" 的任務(wù)壓縮js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(connect.reload())
});


// 定義名為 "my-task-css" 的任務(wù)編譯scss壓縮css
gulp.task('my-task-css', function() {
  gulp.src('./css/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('all.css'))
    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(connect.reload())
    .pipe(gulp.dest('./dist/css'))

});

gulp.task('html', function(){
  gulp.src('*.html')
    .pipe(gulp.dest('dist/html'))
    .pipe(connect.reload())
})
//執(zhí)行壓縮前控淡，先刪除以前壓縮的文件
gulp.task('clean', function() {
  return del(['./dist/css/all.css', './dist/css/all.min.css', './dist/all.js','./dist/all.min.js', './dist/html'])
});
// 定義默認任務(wù)

gulp.task('default',['clean'],function() {
  gulp.start('my-task-js', 'my-task-css', 'watch', 'server' );
});
// 任務(wù)監(jiān)聽
gulp.task('watch', function() {
  // Watch.js files
  gulp.watch('./js/*.js', ['my-task-js']);
  // Watch .scss files
  gulp.watch('./css/*.scss', ['my-task-css']);
  // Watch .html files
  gulp.watch('./*.html', ['html']);
  // Watch any files in dist/, reload on change
  // gulp.watch(['dist/!**']).on('change', livereload.changed);
});

大概講解一下gulpfile.js:

// ...
// 定義名為 "my-task" 的任務(wù)壓縮js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(jshint()) //js檢測
    .pipe(uglify()) //js壓縮
    .pipe(concat('all.js')) //合并為all.js
    .pipe(rename({suffix: '.min'})) // 重命名為all.mim.js
    .pipe(gulp.dest('./dist/js')) //輸出到/dist/js目錄
    .pipe(connect.reload()) // 更新頁面
});
// ...

gulp.task是gulp的api 定義一個使用 Orchestrator 實現(xiàn)的任務(wù)（task）
如上我們定義了my-task-js嫌吠，my-task-css，html掺炭，clean辫诅，default，watch涧狮，server等任務(wù)炕矮，其中:

my-task-js 是將符合所提供的匹配模式的js 進行檢測(gulp-jshint)、壓縮(gulp-uglify)者冤、合并(gulp-concat)肤视、重命名(gulp-rename)、輸出(gulp.dest)到/dist/js目錄下涉枫；

my-task-css 是將符合所提供的匹配模式的sass進行編譯(gulp-sass)邢滑、壓縮(gulp-uglify)、合并(gulp-concat)愿汰、重命名(gulp-rename)困后、輸出(gulp.dest)到/dist/css目錄下；

html 是將符合所提供的匹配模式的html進行監(jiān)聽衬廷，如果有變化則connect.reload()

clean 是如果任務(wù)重新啟動時刪除舊文件摇予；

default gulp默認啟動的任務(wù)

watch gulp的api 監(jiān)視文件，并且可以在文件發(fā)生改動時候做一些事情吗跋。它總會返回一個 EventEmitter 來發(fā)射（emit） change 事件侧戴。

server 依賴gulp-connect啟動一個服務(wù)器

gulp.task('server', function() {
  connect.server({
    port: 8080, //指定端口號，在瀏覽器中輸入localhost:8080就可以直接訪問生成的html頁面
    root: './', //指定html文件起始的根目錄
    livereload: true //啟動實時刷新功能（配合上邊的connect.reload()方法同步使用）
  });
});

配置完gulpfile.js之后，我們給js和css及html加點東西:

首先js/helloworld.js

// helloworld.js
console.log('hello world')

css/index.scss

// index.scss

// 變量測試
$fontColor:  #red;
$backColor: aqua;
// 嵌套類測試
div {
  p {
    font-weight: bold;
    font-size: 20px;
    color: $fontColor;
  }
}

div{
  background: $backColor;
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gulp-study</title>
    <link href=/dist/css/all.min.css rel=stylesheet>
</head>
<body>
    <div id="firstDiv">
        <p>我是gulp</p>
        <p>hello world</p>
    </div>
<p>我是p標(biāo)簽</p>
<p>我是p標(biāo)簽</p>
</body>
<script src="/dist/js/all.min.js"></script>
</html>

運行g(shù)ulp

$ gulp

運行輸出

瀏覽器效果:

效果

接下來我們修改helloworld.js來看看是否能實時刷新
修改如下:

// helloworld.js
console.log('hello world');

let firstDiv =  document.getElementById('firstDiv')

console.log(firstDiv)

按保存之后救鲤，終端給我們報了一個錯:

Unhandled 'error' event

查看js發(fā)現(xiàn)我們用了es6語法的聲明語句 $\color{red}{let}$ 但當(dāng)前gulp無法處理es6語法久窟，有問題解決問題，es6=>es5

解決方案:
安裝gulp-babel babel-core babel-preset-es2015

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

gulpfile.js修改如下:

// ...
const babel = require('gulp-babel');
// ...
// 定義名為 "my-task" 的任務(wù)壓縮js
gulp.task('my-task-js', function(){
  gulp.src('./js/*.js')
    .pipe(babel())
    .pipe(jshint())
    .pipe(uglify())
    .pipe(concat('all.js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('./dist/js'))
    .pipe(connect.reload())
});
// ...

運行

$ gulp

依然報上面的錯本缠；找了一些原因發(fā)現(xiàn)斥扛，雖然安裝了相關(guān)依賴，卻沒有配置.babelrc文件丹锹，即babel還沒轉(zhuǎn)化es6

根目錄添加.babelrc文件

{
    "presets": ["es2015"]
}

重新運行:

$ gulp

結(jié)果如下

查看dist下的js文件

let已經(jīng)轉(zhuǎn)化成var

改變helloworld.js檢查頁面是否刷新

// helloworld.js
console.log('hello world');

let firstDiv =  document.getElementById('firstDiv')

console.log(firstDiv)
firstDiv.style.backgroundColor = 'yellow';

保存稀颁，頁面的天空藍換成你們喜歡的yellow顏色

頁面的天空藍換成你們喜歡的yellow顏色

修改index.scss 查看是否會刷新頁面

// index.scss

// 變量測試
$fontColor:  #red;
$backColor: aqua;
// 嵌套類測試
div {
  p {
    font-weight: bold;
    font-size: 20px;
    color: $fontColor;
  }
}

div{
  background: $backColor;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

頁面更新正常

最后修改index.html 查看是否會刷新頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gulp-study</title>
    <link href=/dist/css/all.min.css rel=stylesheet>
</head>
<body>
    <div id="firstDiv">
        <p>我是gulp</p>
        <p>hello world</p>
    </div>
<div>
    <p>我是真的皮</p>
</div>
</body>
<script src="/dist/js/all.min.js"></script>
</html>

輸出完美

此次項目源碼請轉(zhuǎn)@王一諾gulp-study

文章最后

今天主要學(xué)習(xí)了gulp的簡單項目搭建及實時更新配置；其實gulp類似于grunt的弱化版楣黍，但更簡單好用匾灶，只是插件會少一些，目前主流的項目搭建工具主要是webpack租漂，但依然有不少項目還用著gulp或者grunt

擴展:

webpack中文網(wǎng)
gulpjs中文網(wǎng)
gruntjs中文網(wǎng)

下面還有一些樓主的學(xué)習(xí)筆記:

@webpack4+加vue2+從零開始搭設(shè)vue項目
@nginx部署/代理/跨域

有興趣的可以多多交流@樓主博客