gulp我的總結

時間 2019-12-06

原文原文鏈接

gulp

前言

gulp是基於Nodejs的自動任務運行器，它能自動化地完成javascript/sass/less/html/image/css 等文件的的測試、檢查、合併、壓縮、格式化、瀏覽器自動刷新、部署文件生成，並監聽文件在改動後重復指定的這些步驟。（引用來自Kasmine的博客）。
使用Gulp的優點就是利用流的方式進行文件的處理，使用管道（pipe）思想，前一級的輸出，直接變成後一級的輸入，經過管道將多個任務和操做鏈接起來，所以只有一次I/O的過程，流程更清晰，更純粹。Gulp去除了中間文件，只將最後的輸出寫入磁盤，整個過程所以變得更快（引用來自Kasmine的博客）。javascript

提及gulp咱們都會談到一個名詞，即是前端自動化構建，接下來就前端自動化構建進行解釋。css

前端自動化構建

"說到構建工具，我每每會在前面加「自動化」三個字，由於構建工具就是用來讓咱們再也不作機械重複的事情，解放咱們的雙手的。"（引用來自知乎Jasin Yip的回答）。

gulp的安裝及基本使用

0. 安裝 node.js 及 cnpm 淘寶鏡像：

由於gulp是是基於Nodejs的自動任務運行器，因此必須安裝 node.js。
因爲npm是國外的，使用起來比較慢，咱們這裏使用淘寶的cnpm鏡像來安裝插件及應用，cnpm安裝指南。html

1. 全局安裝 gulp：

$ npm install --global gulp

2. 做爲項目的開發依賴（devDependencies）安裝：

$ npm install --save-dev gulp

3. 在項目根目錄下建立一個名爲 gulpfile.js 的文件：

var gulp = require('gulp');

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

4. 運行 gulp

$ gulp

默認的名爲 default 的任務（task）將會被運行，在這裏，這個任務並未作任何事情。

gulp的插件使用

相關插件用法請看對應連接，感謝原做者對插件的解析，若有侵權請聯繫刪除謝謝。
按需配置好package.json 在根目錄npm install便可。前端

下面附上我本身的項目gulpfile的文件源碼

// gulp引入
let gulp  = require('gulp');

// 路徑
let SRC         = './src',// 入口文件夾
    DIST         = './static',// 出口文件夾
    LESS_SRC     = SRC + '/**/*.less', // less編譯入口 (** 匹配js文件夾的0個或多個子文件夾)  
    JS_SRC         = SRC + '/**/*.js', // JS編譯入口 (* 匹配js文件夾下全部.js格式的文件)
    IMG_SRC     = SRC + '/**/images/*.{png,jpg,gif,ico}',// 圖片編譯入口
    HTML        = './*.html';// html文件

//插件
let less         = require('gulp-less'),// less編譯
    sourcemaps     = require('gulp-sourcemaps'),// 瀏覽器顯示編譯前less或js位置
    uglify         = require('gulp-uglify'),// 壓縮js文件
    pump         = require('pump'),// 可使咱們更容易找到代碼出錯位置
    cleanCSS     = require('gulp-clean-css'),// css壓縮
    rename         = require("gulp-rename"),// 文件改名
    autoprefixer= require('gulp-autoprefixer'),// 根據設置瀏覽器版本自動處理css屬性的瀏覽器前綴
    concat         = require('gulp-concat'),// 合併javascript文件，減小網絡請求。
    imagemin     = require('gulp-imagemin'),// 圖片壓縮
    pngquant     = require('imagemin-pngquant'), // 深度壓縮  
    changed     = require('gulp-changed'),// 只經過更改過的文件
    browserSync = require('browser-sync').create(),//瀏覽器實時刷新  
    babel         = require('gulp-babel');// es6 編譯 es5

// 刷新瀏覽器
let    reload      = browserSync.reload;

// less編譯
gulp.task('less',  ()=> {
    let options = {  
        browsers: ['last 5 versions', 'Android >= 4.0'],// 瀏覽器版本
        cascade: true,//是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
        remove:true //是否去掉沒必要要的前綴 默認：true 
    };  
  return gulp.src([LESS_SRC,'!'+SRC+'/common/**/*.less'])// 除了common文件夾下的less所有編譯
      .pipe(sourcemaps.init())// 啓用sourcemaps功能
      .pipe(changed(DIST))// 只經過更改過的文件
    .pipe(less())// 執行less編譯操做
    .pipe(autoprefixer(options))
    .pipe(cleanCSS({
        keepSpecialComments: '*'
        //保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
    }))// 開啓css壓縮
    .pipe(rename(
        // {
        //     dirname: "css",// 生成到對應目錄下，能夠修改上級目錄名字，可是全部只能生成到一個文件夾
           //  basename: "aloha",// 文件名字
           //  prefix: "bonjour-",// 文件前綴
           //  suffix: ".min",// 文件後綴
           //  extname: ".css"// 文件類型        
        // }
        function (path) {
            // path.dirname += "/css";// 生成到對應目錄下，能夠修改上級目錄名字，可是全部只能生成到一個文件夾
            // path.basename += "-goodbye";// 文件名字
            // path.extname = ".md";// 文件類型     
            // 前綴後綴不生效
            path.dirname = path.dirname.replace('less', 'css');// 修改上級目錄，可生成到對應目錄
        }
    ))// 更名字
    .pipe(sourcemaps.write('./map'))// 生成記錄位置信息的sourcemaps文件，爲空時即爲解析目錄下
    .pipe(gulp.dest(DIST))// 編譯出口，可生成目錄或爲存在目錄
    .pipe(reload({stream: true}));
});

// js操做
gulp.task('js',  (cb)=> {
    // pump是一個小節點模塊，將流鏈接在一塊兒，若是其中一個關閉，則會將它們所有破壞
    // 當dest發出關閉或錯誤時，使用標準source.pipe（dest）事件源將不會被銷燬。 
    // 您還不能提供回調來告訴管道什麼時候完成。
    pump([
            gulp.src([JS_SRC]),// JS編譯入口
            sourcemaps.init(),// 啓用sourcemaps功能
            changed(DIST),// 只經過更改過的文件
            babel({
                presets: ['env']// 編譯成es5
            }),
            uglify(),// 開啓壓縮功能
            concat({
                path:'js/all.js'
            }),// 開啓js合併功能
            rename({suffix: '.min'}),// 更名字中間加‘.min’
            sourcemaps.write('./map'),// 生成記錄位置信息的sourcemaps文件，爲空時即爲解析目錄下
            gulp.dest(DIST),// 編譯出口，可生成目錄或爲存在目錄
            reload({stream: true})
        ],cb// 函數有參數
    )
});

// 圖片壓縮（因爲可能過多圖片，不建議每次更新操做）
// cmd命令：gulp images
gulp.task('images',  ()=> {
        gulp.src([IMG_SRC])// JS編譯入口
        .pipe(changed(DIST))// 只經過更改過的文件
        .pipe(imagemin(
            {
                optimizationLevel: 5, //類型：Number  默認：3  取值範圍：0-7（優化等級）
                progressive: true, //類型：Boolean 默認：false 無損壓縮jpg圖片
                interlaced: true, //類型：Boolean 默認：false 隔行掃描gif進行渲染
                multipass: true, //類型：Boolean 默認：false 屢次優化svg直到徹底優化
                svgoPlugins: [{removeViewBox: false}], // 不移除svg的viewbox屬性  
                use: [pngquant()] // 使用pngquant插件進行深度壓縮
            }
        ))
        .pipe(gulp.dest(DIST))// 編譯出口，可生成目錄或爲存在目錄
    }
)

// 靜態服務器 + 監聽 less/js/html 文件
gulp.task('server',  ()=> {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

// 執行默認操做，順序執行另外的操做
gulp.task('default',['server'],()=> {
    // 執行操做
    gulp.start(['less','js']);
    // 監聽改變
    gulp.watch(LESS_SRC, ['less']);            // 監聽less的改變並執行對應操做
    gulp.watch(JS_SRC, ['js']);                // 監聽js的改變並執行對應操做
    gulp.watch(HTML, reload);    
})

附上對應的package.json。

{
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.1",
    "browser-sync": "^2.23.6",
    "gulp": "^3.9.1", 
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^3.9.3",
    "gulp-concat": "^2.6.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-less": "^4.0.0",
    "gulp-uglify": "^3.0.0",
    "imagemin-pngquant":"^5.1.0",
    "pump": "^3.0.0"
  }
}

問題記錄

gulp編譯less，dirname.replace文件夾爲css文件夾後，對應後綴如何添加.min？(gulp-rename)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。