gulp 使用教程

一 簡介

• gulp是前端開發過程當中對代碼進行構建的工具，是自動化項目的構建利器；她不只能對網站資源進行優化，並且在開發過程當中不少重複的任務可以使用正確的工具自動完成；使用她，咱們不只能夠很愉快的編寫代碼，並且大大提升咱們的工做效率。
• gulp是基於Nodejs的自動任務運行器，她能自動化地完成 javascript/coffee/sass/less/html/image/css 等文件的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。在實現上，她借鑑了Unix操做系統的管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，使得在操做上很是簡單。

 安裝nodejs

說明：gulp是基於nodejs，理所固然須要安裝nodejs；

安裝：打開nodejs官網（https://nodejs.org/en/），點擊碩大的綠色Download按鈕，它會根據系統信息選擇對應版本（windows系統下載.msi文件）。

• tips:安裝完成以後注意將其配置到環境變量（系統變量path中），這樣你就能夠在全局範圍內去使用它了

測試：按window + r 輸入cmd回車，而後輸入node -v

         而後輸入npm -v 

          若是都能打印出相應版本信息，那麼說明你配置成功了

成功安裝顯示以下:

 選裝cnpm

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，若是npm的服務器在中國就行了，因此咱們樂於分享的淘寶團隊幹了這事。

淘寶npm鏡像網址：http://npm.taobao.org 

安裝：使用命令執行

npm install cnpm -g --registry=https://registry.npm.taobao.org 

 

tips:

• 安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤
• cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm代替npm)

安裝完成以下:

 

 生成項目描述文件 package.json

命令 :

• npm init
• cnpm init (可代替 npm init)

（須要項目名稱、版本號、描述、入口文件、運行命令、做者、證書 ---- 一路按回車便可）

//獲得的 package.json 以下

{
  "name": "gulp",      項目名稱(必須)         
  "version": "1.0.0",  項目版本(必須)
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

二 全局安裝gulp

命令 : cnpm i gulp@3 -g

全局安裝gulp

@3 表明選擇了 3 的版本

i 即爲 install

-g 即爲 --global

測試是否安裝成功:gulp -v

三 當前目錄內部安裝 gulp 模塊

命令:
cnpm i gulp@3 -D

cnpm i gulp@3 -S （兩者選擇其一便可）

-D 縮寫 --save-dev 開發依賴

-S 縮寫 --save 項目依賴

開發依賴： 開發過程當中須要使用到的依賴的模塊，項目上線時不須要的模塊 --- 代碼格式校驗的模塊

項目依賴： 項目上線仍然須要使用的模塊

----- 若是不知道怎麼選擇，那你就寫 -S

成功安裝以下:

 

四 建立文件 gulpfile.js ,配置gulp

const gulp = require('gulp');

4.1 建立 index.html，使用gulp完成對於index.html的複製操做，複製到當前目錄的dist目錄內

//+++
// 複製index.html 到 dist 目錄
gulp.task('copy-index', function () {
    gulp.src('./index.html')
        .pipe(gulp.dest('dist'))
})

命令行執行了 gulp copy-index 發現多了 dist目錄，且目錄下有一份同樣的index文件

4.2 gulp/css/a.css + gulp/css/b.css

4.2.1 複製 gulp/css 至 dist/css

拿到css文件夾下全部文件

gulp.src('./css/**/*')

拷貝css文件夾下的全部文件以及文件夾內的文件

//+++
gulp.task('copy-css', function () {
    gulp.src('./css/**/*')
        .pipe(gulp.dest('dist/css'))  //全部文件拷貝到dist文件加內
})

指令:gulp copy-css

4.2.2 合併css文件

安裝合併模塊

指令:cnpm i gulp-concat -S

合併代碼以下:

//++++
const concat = require('gulp-concat');  //引入合併模塊
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到全部的css
        // ++++
        .pipe(concat('main.css')) // 合併
        .pipe(gulp.dest('dist/css'))
})

4.2.3 壓縮css

安裝壓縮模塊

指令:cnpm i gulp-minify-css -S

// ++++
const minifyCss = require('gulp-minify-css');  //引入壓縮模塊
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到全部的css
        .pipe(concat('main.css')) // 合併
        // ++++
        .pipe(minifyCss()) // 壓縮
        .pipe(gulp.dest('dist/css'))
})

4.2.4 既要 未壓縮的也要有壓縮的

安裝重命名模塊

cnpm i gulp-rename -S

重命名

合併代碼放到dist/css

壓縮css 重命名 再放到dist/css

//+++
const rename = require('gulp-rename');  //引入重命名模塊
gulp.task('copy-css', function () {
    gulp.src('./css/**/*') // 拿到全部的css
        .pipe(concat('main.css')) // 合併
        //+++
        .pipe(gulp.dest('dist/css'))
        .pipe(minifyCss()) // 壓縮
        //+++
        .pipe(rename('main.min.css'))  //重命名爲main.min.css
        .pipe(gulp.dest('dist/css'))
})

5.3 gulp/js/a.js + gulp/js/b.js

5.3.1 複製gulp/js 至 dist/js

本質也是文件的合併,操做方法一致

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(gulp.dest('dist/js'))
})

5.3.2 合併js代碼至 dist/js

本質也是文件的複製,操做方法一致

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        // +++
        .pipe(concat('main.js'))
        .pipe(gulp.dest('dist/js'))
})

 

5.3.3 壓縮js

須要下載壓縮js模塊

指令: cnpm i gulp-uglify -S

//引用壓縮js模塊
const uglify = require('gulp-uglify');

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合併js
        // +++
        .pipe(uglify()) // 壓縮js
        .pipe(gulp.dest('dist/js'))
})

 

5.3.4 合併壓縮重命名

gulp.task('copy-js', () => {
    gulp.src('./js/**/*')
        .pipe(concat('main.js')) // 合併js
        // +++
        .pipe(gulp.dest('dist/js'))
        .pipe(uglify()) // 壓縮js
        // +++
        .pipe(rename('main.min.js'))
        .pipe(gulp.dest('dist/js'))
})

 

5.4 gulp/assets --- 圖片

5.4.1 複製圖片至 dist/assets

//+++
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        .pipe(gulp.dest('dist/assets'))
})

5.4.2 壓縮圖片

須要下載壓縮圖片模塊

指令:cnpm i gulp-imagemin -S

//引入壓縮圖片模塊
const imagemin = require('gulp-imagemin');
gulp.task('copy-images', () => {
    gulp.src('./assets/**/*')
        // +++
        .pipe(imagemin()) // 壓縮圖片
        .pipe(gulp.dest('dist/assets'))
})

 

5.5 處理數據 data/home.json data/kind.json

沒有後端接口時，本身的模擬數據

數據的複製 ,與文件的複製同樣

// +++
gulp.task('copy-data', () => {
    gulp.src('./data/**/*')
        .pipe(gulp.dest('dist/data'))
})

 

六、一次性執行多個任務

任務的名稱不要本身隨意定義，就寫build

// +++
gulp.task('build', ['copy-index', 'copy-css', 'copy-js', 'copy-images', 'copy-data'], () => {
    console.log('success')
})

 

七、gulp 服務器

下載服務器模塊

指令:cnpm i gulp-connect -S

tip: server 任務名不能更改

//+++
gulp.task('server', () => {
    connect.server({
        // 說明服務器的根目錄
        root: 'dist',
        livereload: true // 實時更新
    })
})

 

八、檢測html文件、css文件、js文件、圖片、數據的改變，執行不一樣的任務

任務監聽,能夠監放任務的改動

// +++
gulp.task('watch', () => {
    gulp.watch('index.html', ['copy-index'])
    gulp.watch('css/**/*', ['copy-css'])
    gulp.watch('js/**/*', ['copy-js'])
    gulp.watch('assets/**/*', ['copy-images'])
    gulp.watch('data/**/*', ['copy-data'])
})

 

九、同時默認執行 server 任務 和 watch 任務

gulp.task('default', ['server', 'watch'])

gulp

十、熱更新 --- 主動更新頁面

在頁面、css、js、圖片、數據相關任務最後執行一句話，從新啓動服務器

實現更改文件後,頁面實時更新

gulp.task('copy-data', () => {
   gulp.src('./data/**/*')
       .pipe(gulp.dest('dist/data'))
       .pipe(connect.reload()) //*********************************************
})