gulp打包

gulp3.9.1

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

gulp的優點

注意：當前學習的是gulp3.9.1版本，安裝時請指定版本，默認安裝的爲最新的版本4.0，兩版本有差異。

創建項目文件夾

gulp入門指南：https://www.gulpjs.com.cn/docs/getting-started/

開發環境，src文件夾

生產環境，build文件夾

gulp環境搭建

• 全局安裝gulp yarn global add gulp
• 檢查是否安裝成功 gulp -v
• 在本地路徑安裝gulp yarn add gulp@3.9.1 -D
• 安裝完後查看package.json中的devDependencies是否有了gulp,以及版本是否正確
• 在項目根目錄建立一個gulpfile.js的文件

 

 

 

​x

 

 

 

 

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

​

gulp.task('default', function() { //建立一個任務

  //  console.log('執行任務')

});

 

 

• 運行任務

  • 運行gulp 會執行默認('default')的task任務
  • 若是任務名字不是default而是 ‘aaa’（或其餘），那麼運行時應該執行gulp aaa

• 運行時若是報錯 *Cannot read property 'apply' of undefined*，請從新安裝一下gulp-clinpm i gulp-cli -g

開發環境向生產模式輸出

複製文件 src -> dest

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('default',['task1'],function(){

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

    .pipe(gulp.dest('./build/')) 

    //src()讀取文件

    //pipe()至關於下一步的意思

    //dest()輸出文件

});

 

 

watch監聽文件改變

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('watchfile',function(){

    gulp.watch('./src/index.html',function(){

        console.log('發現文件變化了')

    })

})

 

 

css

編譯less文件

須要的插件：gulp-less

用法：https://www.npmjs.com/package/gulp-less

• 本地安裝gulp-less yarn add gulp-less -D

• 安裝完後查看package.json中的devDependencies是否有了

• gulpfile頂部引入gulp-less

   

   

   

  xxxxxxxxxx

   

   

   

   

  var less = require('gulp-less');

   

   

• 建立less任務

   

   

   

  xxxxxxxxxx

   

   

   

   

  gulp.task('less',function(){

      gulp.src('./src/less/*.less')  //讀取less文件

      .pipe(less())        //編譯less

      .pipe(gulp.dest('./src/css'))  //輸出到指定文件夾

  });

   

   

合併css文件

須要的插件：gulp-concat

• 本地安裝gulp-less yarn add gulp-concat -D

• 安裝完後查看package.json中的devDependencies是否有了

• gulpfile頂部引入gulp-concat

   

   

   

  xxxxxxxxxx

   

   

   

   

  var less = require('gulp-less');

   

   

• 建立concat任務

   

   

   

  xxxxxxxxxx

   

   

   

   

  gulp.task('concat',function(){

      gulp.src('./src/css/*.css')//讀取less文件

      .pipe(concat('all.css'))//合併css文件，並指定合併後文件的名字

      .pipe(gulp.dest('./src/css'))//輸出到指定文件夾

  });

   

   

css壓縮

須要的插件：gulp-clean-css

安裝和引入同上gulp-less

https://www.npmjs.com/package/gulp-clean-css

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('concat',function(){

    gulp.src('./src/css/*.css')//讀取less文件

    .pipe(concat('all.css'))//合併css文件，並指定合併後文件的名字

    .pipe(cleanCSS())//壓縮合並後的css文件

    .pipe(gulp.dest('./src/css'))//輸出到指定文件夾

});

 

 

刪除文件

須要的插件：del

安裝和引入同上gulp-less

https://www.npmjs.com/package/del

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('del',function(){

    del([//參數爲數組

        './src/css/*.css',//要刪除的文件

        './build/*'//要刪除的文件

    ])

});

 

 

js

ES6 -> ES5

須要的插件：gulp-babel

https://www.npmjs.com/package/gulp-babel

• 安裝時請根據npm網站上的提示操做以避免版本不一致致使報錯：npm install --save-dev gulp-babel @babel/core @babel/preset-env

• 建立js任務,把src中js文件中的js文件編譯爲es5後輸出到build的js文件夾中

   

   

   

  xxxxxxxxxx

   

   

   

   

  gulp.task('js',function(){

      gulp.src('./src/js/*.js')//讀取文件

      .pipe(babel({//編譯,參數請參照npm網站上的提示

          presets:['@babel/env']

      }))

      .pipe(gulp.dest('./build/js'))//輸出文件

  });

   

   

合併js

須要的插件：concat(同css)

只需在編譯後在concat一下

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('js',function(){

    gulp.src('./src/js/*.js')//讀取文件

    .pipe(babel({//編譯,參數請參照npm網站上的提示

        presets:['@babel/env']

    }))

    .pipe(concat('all.js'))//合併編譯後的js

    .pipe(gulp.dest('./build/js'))//輸出文件

});

 

 

壓縮js

須要的插件

重命名

須要的插件：gulp-rename

安裝和引入同上gulp-less

 

 

 

xxxxxxxxxx

 

 

 

 

.pipe(rename('./all.min.js')) gulp.task('js',function(){

    return gulp.src('./src/js/*.js')

    .pipe(babel({   //編譯js

        presets:['@babel/env']

    }))

    .pipe(concat('all.js')) //合併js

    .pipe(uglify()) //壓縮js

    .pipe(rename('./all.min.js'))//此處路徑是相對於以前的js文件（all.js）的路徑

    .pipe(gulp.dest('./build/js'))

    .pipe(reload({

        stream:true

    }))

});

 

 

圖片

壓縮圖片

須要的插件：gulp-imagemin

https://www.npmjs.com/package/gulp-imagemin

• 安裝和引入同上gulp-less
• 建立img任務，把圖片壓縮後輸出到build目錄下

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('img',function(){

    gulp.src('./src/images/*')                                    //讀取

    .pipe(imagemin([

        imagemin.gifsicle({interlaced:true}),                    //gif

        imagemin.jpegtran({progressive:true,arithmetic:true}),   //jpg

        imagemin.optipng({                                       //png

            optimizationLevel:5,

        }), 

        imagemin.svgo({                                         //svg

            plugins:[

                {removeViewBox:true},

                {cleanupIDs:false}

            ]

        })

    ],{verbose:true}))                              //log單個圖片的壓縮比

    .pipe(gulp.dest('./build/images'))              //輸出

});

 

 

• 執行gulp img

精靈圖/雪碧圖

須要的插件：gulp-css-spriter

https://www.npmjs.com/package/gulp-css-spriter

• 安裝和引入同上gulp-less

• 在合併css以後生成精靈圖

   

   

   

  xxxxxxxxxx

   

   

   

   

  gulp.task('css',['less'],function(){

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

      .pipe(concat('all.css'))

      .pipe(spriter({//精靈圖

          'spriteSheet': './src/images/spritesheet.png',//精靈圖名字，和輸出路徑

          'pathToSpriteSheetFromCSS': '../images/spritesheet.png'//css中使用精靈圖的路徑

      }))

      .pipe(cleanCSS())

      .pipe(gulp.dest('./src/css'))

  });

   

   

• 執行gulp css

base64

須要的插件：gulp-base64

https://www.npmjs.com/package/gulp-base64

爲何要轉base64？

能夠減小請求，base64不用發送請求，小圖適合轉base64，

大圖不適合，由於大圖的base64字符串很長很長

使用;

• 安裝和引入同上gulp-less

• 建立base64任務，把css檢索，小圖編譯成base64輸出到build目錄下css

   

   

   

  xxxxxxxxxx

   

   

   

   

  gulp.task('base64',function(){

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

      .pipe(base64({

          baseDir: './src/images',

          extensions: ['svg', 'png', /\.jpg#datauri$/i],

          exclude:    [/\.server\.(com|net)\/dynamic\//, '--live.jpg'],

          maxImageSize: 5*1024, // bytes

          debug: true

      }))

      .pipe(gulp.dest('./build/css'))

  });

   

   

• 執行gulp base64

瀏覽器同步

瀏覽器實時、快速響應穩健更改Browsersync

http://www.browsersync.cn/

安裝browser-sync並引入

先安裝再引入

 

 

 

xxxxxxxxxx

 

 

 

 

var browserSync = require('browser-sync').create();//瀏覽器同步

 

 

開啓靜態服務器

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('server',function(){

    browserSync.init({

        server: {

            baseDir: "./",          //設置服務器跟目錄

            index:'./src/index.html'  //設置首頁

        },

        port:8080//設置端口號

    });

})

 

 

此時運行gulp server會自動打開瀏覽器，但修改源代碼時瀏覽器並不會自動更新。

想要文件保存時瀏覽器自動更新就得進行重載

watch監聽文件的改變

開啓服務器的同時，咱們能夠經過watch監聽文件的改變而後再重載相應的文件，就能夠從新加載內容了

watch路徑請勿使用./開頭，./開頭監聽不到新增的文件

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.watch('src/*.html',['reload']);

gulp.watch('src/less/*.less',['css']);

gulp.watch('src/js/*.js',['js']);

 

 

引入重載模塊

該模塊是browserSync的子模塊，不用從新安裝引入便可

 

 

 

xxxxxxxxxx

 

 

 

 

var reload = browserSync.reload;//手動重載

 

 

咱們能夠在開啓服務器的時候開始監聽

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('server',function(){

    browserSync.init({

        server: {

           baseDir: "./",          //設置服務器跟目錄

           index:'./src/index.html'  //設置首頁

        },

        port:8080

    });

    gulp.watch('./src/*.html',['reload']);  //監聽html改變就去執行reload

    gulp.watch('./src/less/*.less',['css']); //監聽less改變就去執行css

    gulp.watch('./src/js/*.js',['js']);//監聽js改變就去執行js

});

//reload任務用來重載html文件

gulp.task('reload',function(){

    gulp.src('./src/*.html') //讀取文件

    .pipe(reload({ //對讀取到的文件開啓重載

        stream:true

    }))

});

//css任務執行完後記得也重載一次css

gulp.task('css',['less'],function(){

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

    .pipe(concat('all.css')) //合併css

    .pipe(cleanCSS()) //壓縮css

    .pipe(gulp.dest('./src/css'))

    .pipe(reload({//重載css

        stream:true

    }))

});

//js任務執行完後記得也衝在一次js

gulp.task('js',function(){

    return gulp.src('./src/js/*.js')

    .pipe(babel({   //編譯js

        presets:['@babel/env']

    }))

    .pipe(concat('all.min.js')) //合併js

    .pipe(uglify()) //壓縮js

    .pipe(gulp.dest('./build/js'))

    .pipe(reload({//重載

        stream:true

    }))

});

 

 

rev版本號

輸出帶版本號的css文件

須要的插件:gulp-rev

先安裝gulp-rev，再引入（同gulp-less）

 

 

 

xxxxxxxxxx

 

 

 

 

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

    .pipe(concat('all.css')) //合併css

    .pipe(cleanCSS()) //壓縮css

    .pipe(rename({ suffix: '.min' }))

    .pipe(rev())//輸出帶版本號的css文件

    .pipe(gulp.dest('./build/css'))

    .pipe(reload({

        stream:true

    }))

 

 

輸出帶版本號的.json映射文件

 

 

 

xxxxxxxxxx

 

 

 

 

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

    .pipe(concat('all.css')) //合併css

    .pipe(cleanCSS()) //壓縮css

    .pipe(rename({ suffix: '.min' }))

    .pipe(rev())//輸出帶版本號的css文件

    .pipe(gulp.dest('./build/css'))//輸出css

    .pipe(rev.manifest())//生成映射文件.json

    .pipe(gulp.dest('./rev/css/'))//輸出映射文件

    .pipe(reload({

        stream:true

    }))

 

 

替換html中的引入路徑

須要的插件gulp-rev-collector

 

 

 

xxxxxxxxxx

 

 

 

 

var revCollector = require('gulp-rev-collector'); //引入

 

 

建立rev任務，更新html中的全部引用路徑

 

 

 

xxxxxxxxxx

 

 

 

 

gulp.task('rev',function(){

    gulp.src(['./rev/**/*.json','./src/*.html'])//讀取到全部映射文件和html文件

    .pipe(revCollector({}))//替換字符創路徑

    .pipe(gulp.dest('./build/'))

});

 

 

其餘插件

css3加前綴gulp-autoprefixer

刪除文件gulp-clean

通知

須要的插件：gulp-notify

https://www.npmjs.com/package/gulp-notify

控制任務的同步異步執行

須要的插件：gulp-sequence

https://www.npmjs.com/package/gulp-sequence

 

 

 

xxxxxxxxxx

 

 

 

 

https://www.npmjs.com/package/gulp-sequence

 

 

 

 

 

xxxxxxxxxx

 

 

 

 

runSequence('build-clean',['build-scripts', 'build-styles'],'build-html',callback）

 

 

以逗號隔開的爲同步，按順序從左到右，

數組內的爲異步並行

插件應用時注意

若是該插件打包時老師報錯，試試刪除node文件從新install，

若是還不行，試試先移除該插件再用npm安裝