gulp壓縮檔案

雯不胖發表於2020-12-22

壓縮檔案的步驟

  • 建立專案原始碼的目錄結構
    • npm init 生成專案的配置檔案
    • 建立專案結構（專案中所需要的的資料夾）
    • 安裝gulp依賴，npm install --save-dev gulp
    • 建立一個gulp的配置檔案gulpfile.js

建立壓縮任務

  • 把gulp模組引入 gulpfile.js檔案中
  • 宣告一個函式壓縮任務的函式： function css(){}，並且這個函式中必須有return
  • 在這個函式中寫任務：
    • 1.gulp.src(需要壓縮的css檔案地址)
      • gulp.src(’./src/css/index.css’) 這樣就表示值壓縮css下index.css 這個檔案，但是我們壓縮的是不可能值壓縮一個
      • gulp.src(’./src/css/**’) 找到css這個資料夾中所有的檔案進行壓縮
    • 2.找到這些檔案之後，就進行壓縮
      • gulp.pipe() 這個方法就是幫我們做事情的，你可以在中這個括號中寫正則把空格去掉，但是這樣比較麻煩，已經有別人寫好了這個外掛（gulp-cssmin），我們直接下載就可以了
        • gulp-cssmin這個包的功能就是專門壓縮css檔案的
        • 下載css-min：npm install -D gulp-cssmin
        • 匯入css-min
        • pipe(cssmin()) 執行css-min，其實就是在執行壓縮css
    • 3.把壓縮的檔案放到指定的資料夾中 gulp.dest(‘你要放到哪裡’)
      + pipe(gulp.dest(‘檔案路徑’))
      + gulp.dest() 是一個方法，需要用pipe() 來執行
        function css() {
        return gulp
            .src('./src/css/**')
            .pipe(cssmin())
            .pipe(gulp.dest('./dist/css'))
    }
    • 4.最後，必須使用exports把這格函式匯出，才能使用
      • exports.css = css;
    • 5.在命令列輸入 gulp css 回車就可以看到壓縮的結果

檔案所需要的的第三方模組

  • 壓縮css:
    • npm install -D gulp-cssmin
  • 壓縮js:
    • npm install -D gulp-babel@7.0.1 (一定要安裝這個指定版本)
    • npm install -D babel-core（不需要引入）
    • npm install -D babel-preset-env（不需要引入）
    • npm install -D gulp-uglify
  • 壓縮HTML:
    • npm install -D gulp-htmlmin
  • 清除快取：
    • npm install -D gulp-clean

建立壓縮js程式碼

  • 壓縮js程式碼，必須先把ES6的程式碼轉化為es5才能壓縮 babel就是轉化的
    function js() {
        return gulp
            .src('./src/js/**')
            .pipe(babel({
                 presets: ["env"]
            }))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
    }

建立一個壓縮HTML的程式碼

  • 壓縮HTML的時候必須傳遞一個引數，為物件
    {
        collapseWhitespace: true, // 表示去除空格
        removeEmptyAttributes: true, // 移出空的屬性
        minifyCSS: true, // 壓縮 style 標籤
        minifyJS: true, // 壓縮 script 標籤
    }

清除快取，也就是在壓縮之前可以把快取清除

    function clean() {
        return gulp
            .src(['./dist/**'])
            .pipe(gulpclean())
    }

建立一個多工執行的任務

  • series()按順序依次執行
  • parallel()中的任務同時執行
    let all = gulp.series(clean, gulp.parallel(css, js, html, data, lib, static));
  • 在命令列 gulp all 就相當於執行這個兩個方法中的所有任務

建立一個壓縮完之後開啟瀏覽器的服務

  • 需要下載 gulp-webserver模組，
    • npm install -D gulp-webserver
    • 匯入模組
    • webserver 需要傳遞一個引數，引數為物件
        function webserver() {
        return gulp
            .src('./dist')
            .pipe(webservers({
                host: 'localhost', // 域名
                port: 3000, // 監聽的埠號，統一寫 3000
                open: './html/index.html', // 開啟的頁面，相對於 dist 資料夾來的目錄
                livereload: true, // 瀏覽器自動重新整理
            }))
    }

建立第一個實時監聽的任務

  • 需要用到gulp.watch()
    function watchs() {
        gulp.watch('./src/css', css);
        gulp.watch('./src/js', js);
        gulp.watch('./src/html', html);
        gulp.watch('./src/data', data);
        gulp.watch('./src/static', static);
    }

總結：


// 引入gulp 模組
const gulp = require('gulp');
const cssmin = require('gulp-cssmin');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin');
const gulpclean = require('gulp-clean');
const webserver = require('gulp-webserver');

/* 
    +   如果這裡報一個錯誤：“Cannot read property 'apply' of undefined”
            +   這是node v12 和 gulp v4版本以上的一個注意點，需要全域性安裝 gulp-cli: `npm i -g gulp-cli`

*/

// 建立一個 壓縮css任務
// gulp.src('你要壓縮的檔案的路徑')
// gulp.pipe(去掉空格的任務) 
// .pipe(gulp.dest('./dist/css')) 把壓縮號的檔案放入 dist/css檔案中
// 也需要一個第三方模組 gulp-cssmin 
// 需要下載 gulp-cssmin

function css(){
    return gulp
        //  src/css/**   表示壓縮css下面的所有檔案 
        .src('./src/css/**')
        .pipe(cssmin())
        .pipe(gulp.dest('./dist/css'))
}

// 建立一個壓縮js的任務
/* 
    瀏覽器只識別 es5，如果程式碼中有es6 和 es7的程式碼需要把 這些程式碼轉化為es5在進行壓縮
*/
function js(){
    return gulp
        .src('./src/js/**')
        .pipe(babel({
            presets: ["env"]
       }))
       .pipe(uglify())
       .pipe(gulp.dest('./dist/js'))
}


// 壓縮HTML任務
function html(){
    return gulp 
        .src('./src/html/**')
        .pipe(htmlmin(
            {
                collapseWhitespace: true, // 表示去除空格
                removeEmptyAttributes: true, // 移出空的屬性
                minifyCSS: true, // 壓縮 style 標籤
                minifyJS: true, // 壓縮 script 標籤
            }
        ))
        .pipe(gulp.dest('./dist/html'))
}

// 建立一個任務把靜態資源股複製到dist資料夾中
function data(){
    return gulp
        .src('./src/data/**')
        .pipe(gulp.dest('./dist/data'))
}

function static(){
    return gulp
        .src('./src/static/**')
        .pipe(gulp.dest('./dist/static'))
}

// 建立一個清楚快取的任務
function clean(){
    return gulp 
        .src(['./dist'])
        .pipe(gulpclean());
}


// 建立一個開啟伺服器的任務
function server(){
    return gulp
        .src('./dist')
        .pipe(webserver({
            host:'localhost',
            port:3000,
            open:'./html/index.html',
            livereload: true,
        }))
}

function watchs() {
    gulp.watch('./src/css', css);
    gulp.watch('./src/js', js);
    gulp.watch('./src/html', html);
    gulp.watch('./src/data', data);
    gulp.watch('./src/static', static);
}

// 把任務匯出
exports.css = css;
exports.js = js;
exports.html = html;
exports.data = data;
exports.static = static;
exports.clean = clean;
exports.server = server;
exports.watchs = watchs;

// 建立一個總任務 去執行所有的分任務
// 執行其他壓縮或者複製之前，應該先清除快取
// exports.build = gulp.series(clean,css,js,html,data,static);
exports.build = gulp.series(clean,gulp.parallel(css,js,html,data,static),server,watchs);

相關文章