Gulp基礎入門

官網：https://www.gulpjs.com.cn/

npm：https://www.npmjs.cn/

Gulp 是一個自動化工具，前端開發者可以使用它來處理常見任務：

• 搭建web伺服器
• 檔案儲存時自動重載浏覽器
• 使用預處理器如Sass、LESS 優化資源
• 比如壓縮CSS、JavaScript、壓縮圖檔

所需要的環境：nodeJs

項目基礎結構：

• src 檔案夾、用于存放源代碼檔案
• dist 檔案夾、用于存放建構後的檔案
• gulpfile.js 腳本檔案、用于編寫gulp任務

然後下載下傳gulp庫檔案：

npm install gulp

下載下傳gulp-cli指令工具：

npm install gulp-cli -g

gulp提供的方法：

• gulp.src()：擷取任務要處理的檔案
• gulp.dest()：輸出檔案
• gulp.task()：建立gulp任務
• gulp.watch()：監控檔案的變化

小嘗試:

const gulp = require("gulp");
//使用task建立gulp任務
// 第一個參數 代表任務的名稱
// 第二個代表回調函數
gulp.task('first',()=>{
    console.log("執行")
    // 使用src擷取要處理的任務
    // 使用dest 把檔案輸出到其他檔案夾
    gulp.src('./src/css/icon.css')
        .pipe(gulp.dest('dist/css'))
})
           

終端中 執行

gulp first

gulp第三方插件

• gulp-htmlmin : html檔案壓縮
• gulp-csso ： css檔案壓縮
• gulp-babel ： JavaScript 文法轉換
• gulp-less ： less文法轉化
• gulp-uglify ：壓縮混淆JavaScript
• gulp-file-include ： 公共檔案
• browsersync ： 浏覽器實時同步

插件的使用三步驟：

1. 通過 npm 安裝插件
2. 通過 require 引用插件
3. 通過文法使用插件

const gulp = require("gulp");
const htmlmin = require('gulp-htmlmin')
const fileInclude = require('gulp-file-include')
const less = require('gulp-less')
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// npm install gulp-htmlmin  gulp-file-include
//  html 壓縮 
// 抽取公共代碼
gulp.task('htmlmin',()=>{
    // collapseWhitespace 代表是否要壓縮檔案中的空白格
    gulp.src('./src/*.html')
    .pipe(fileInclude())
    .pipe(htmlmin({collapseWhitespace:true}))
    .pipe(gulp.dest('dist'))
})

// npm install gulp-less  gulp-csso
// 壓縮css
// 轉化less
gulp.task('cssmin',()=>{
    gulp.src('./src/css/*.less')
        .pipe(less())
        .pipe(csso())
        .pipe(gulp.dest('dist/css'))
})


// npm install gulp-uglify  gulp-babel
// 轉換js
gulp.task('jsmin', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist'))
);


// 複制檔案夾
gulp.copy('copy',()=>{
    gulp.src('src/images/*')
        .pipe(gulp.dest('dist/images'))
})

//  把所有任務整合在一起
gulp.task('default',['htmlmin','cssmin','jsmin','copy'])