Gulp前端自動化構建工具

爲什麼使用Gulp

Gulp自動化構建工具可以增強你的工作流程！
易於使用、易於學習、構建快速、插件高質！
在日常開發中，可以藉助Gulp的一些插件完成很多的前端任務。
如：代碼的編譯（sass、less）、壓縮css，js、圖片、合併js，css、es6轉es5、自動刷新頁面等。

gulp中文官網： https://www.gulpjs.com.cn/
插件地址： https://gulpjs.com/plugins/

使用Gulp

1、全局安裝gulp
cnpm install gulp -g （只需要安裝一次）

2、gulp安裝的版本
gulp -v

3、在你當前的文件夾內建立Gulp項目
cd 文件夾

4、對當前項目初始化
cnpm init
要求配置一些信息
生成一個package.json 文件保存，當前這個項目中關於gulp的所有配置信息
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Pzykonz5-1585317037460)(en-resource://database/1300:1)]

5、本地安裝gulp(一個項目安裝一次)
cnpm install gulp --save-dev
–save 將這個軟件安裝到當前目錄下
-dev 保留安裝信息在package.json裏
簡寫:
cnpm i gulp -D
cnpm i [email protected] -D

多出一個文件夾 node_modules 存儲着，我們安裝的所有文件。

6、新建文件 gulpfile.js
主要目的爲了給我們gulp發佈任務，告訴gulp應該如何去管理項目。

安裝插件：
cnpm install 插件名 --save-dev
cnpm i 插件名 -D

gulp中的方法
task()佈置任務
 有三個參數：
  第一個參數：任務名稱 默認任務 default
  第二個參數：該任務依賴的其它任務 是一個數組（可選）

var gulp = require('gulp');
gulp.task('default', function(){
    console.log('執行默認任務');
});

  第三個參數：任務回調函數（任務執行）
 執行其它任務的方式有兩種
  第一種：通過default任務依賴執行
  第二種：按gulp任務名稱執行
src()源文件路徑（參數可以是一個數組）
dest()目標文件路徑 dest參數中的文件夾名稱可以自動創建
pipe()管道方法， 表示輸送， 也就是“下一步”
watch()監聽
 兩個參數：
  第一個參數：監聽文件的路徑
  第二個參數：監聽的任務名稱 數組

Gulp常用插件

文件合併

//gulp-concat
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('concat', function () {
    return gulp.src('./js/*.js') //要合併的文件
    .pipe(concat('all.js')) //合併匹配到的js文件並命名爲 "all.js"
    .pipe(gulp.dest('./dist'));//寫入dist文件夾
});

js文件壓縮

//gulp-uglify
var gulp = require('gulp');
var uglify = require('gulp-uglify');
gulp.task('uglifyJS', function () {
    return gulp.src('./dist/all.js') // 要壓縮的js文件
    .pipe(uglify()) //使用uglify進行壓縮
    .pipe(gulp.dest('./dist/js'));//寫入js文件夾
});

重命名

//gulp-rename
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
gulp.task('rename', function () {
    return gulp.src('./js/jquery-1.8.3.js') //讀取文件
    .pipe(uglify()) //壓縮
    .pipe(rename('jquery-1.8.3.min.js'))//重命名
    .pipe(gulp.dest('./js/'));//寫入js文件夾
});

html文件壓縮

//gulp-minify-html
var gulp = require('gulp');
var minifyHtml = require('gulp-minify-html');
gulp.task('minifyHtml', function () {
    return gulp.src('./test.html') //要壓縮的html文件
    .pipe(minifyHtml()) //壓縮html
    .pipe(gulp.dest('./dist/'));//寫入dist文件夾
});

ES6轉ES5

//gulp-babel
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('es6Toes5', function () {
    return gulp.src('./js/class.js')
    .pipe(babel({ presets: ['@babel/preset-env']}))
    .pipe(gulp.dest('./dist/js'))
});

自動刷新

//gulp-connect

//所有.html處理
gulp.task("copy-html", function(){
    return gulp.src("*.html")
    .pipe(gulp.dest("dist"))
    .pipe(connect.reload());
})
//執行任務(這裏也可以多個任務一起進行)
gulp.task("build", ["copy-html"], function(){
    console.log("項目建立成功");
});
/*啓動監聽*/
gulp.task("watch", function(){
    gulp.watch("*.html", ["copy-html"]);
})

/*
    啓動一個服務器
    gulp-connect
*/
const connect = require("gulp-connect");
gulp.task("server", function(){
    connect.server({
        root: "dist",
        port: 8888,
        livereload: true
    })
})
//同時啓動watch和server
gulp.task("default", ["server", "watch"]);
//ctrl+c結束監聽