使用gulp打包壓縮完整項目

簡單的介紹下gulp:

　　gulp是基於流/node的自動化構建工具；它採用的是管道傳輸機制（即一個輸入源，一個管道，一個輸出源）

　　輸入源即開發階段的文件：gulp.src('path')

　　經過管道進行傳輸：.pipe()

　　輸出源即壓縮事後文件所放置的位置：gulp.dist('path')

首先得全局安裝gulp：$ cnpm install --global gulp

　　注：全局安裝須要在c盤下進行安裝（ window+r ）打開命令窗

　　　　cnpm和npm是等價的，順便用哪一個；且install能夠簡化成 i

　　　　全局安裝以後的全部命令都是在你所在文件夾進行，別在c盤目錄下進行安裝；

而後再初始化文件夾：cnpm init

　　初始化文件夾會出現一個package.json文件，以後安裝的一系列插件都在裏面能夠看到；

第三步則是局部安裝：cnpm install gulp --save-dev

　　在這裏，--save是將保存配置信息至package.json，-dev是保存至package.json的devDependencies對象中

　　安裝以後會出現一個node_modules文件夾                     

　　--save-dev能夠簡化成-D

第四步則是建立一個 gulpfile.js 文件

　　gulpfile.js文件的位置最好是與node_modules，package.json放在同一層級，如圖：

　　準備工做已經ko了，正式開始壓縮項目吧！

咱們先檢測下gulp是否能夠正常啓動

　　在gulpfile.js中配置，以下：

 

//引入gulp
var gulp = require("gulp");
//開啓一個任務
gulp.task('default', function(){
    //檢測gulp是否啓動
    console.log("gulp啓動了");
})

 

　　直接在小黑窗口執行gulp就能夠看到了喲！！！

 

壓縮html文件

　　　安裝壓縮html文件的依賴：cnpm i gulp-htmlmin -D

　　　再在gulpfile.js中配置，以下：

//引入壓縮html所需的模塊
var gulpHtmlMin = require('gulp-htmlmin');

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

    //能夠單個壓縮
    gulp.src('src/zhanku.html')

    //多個壓縮
    gulp.src(['src/zhanku.html', 'src/enter.html'])

    //也能夠壓縮整個html文件夾
    gulp.src('src/html/**/*.html')
    
    .pipe(gulpHtmlMin({
        //刪除空格    
        collapseWhitespace : true,
        //刪除註釋
        removeComments : true
    }))
    .pipe(gulp.dest('dist'))
})

 

　　注：配置完成以後執行的話直接在黑窗口執行 gulp 加上task後面所跟的那個名字（不固定，順便設置）

若是是sass文件，則直接編譯sass並壓縮css

　　安裝依賴：cnpm i gulp-sass-china -D

　　  再在gulpfile.js中配置，以下：

var gulpSassmin = require('gulp-sass-china');

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

    //編譯src下面的scss/sass文件夾裏的全部文件
    gulp.src('src/scss/**/*.{scss, sass}')
    
    //outerStyle是壓縮類型，默認是nested(嵌套縮進)、enpanded(無縮進)
    //comoact(簡介格式)、compressed(壓縮)
    .pipe(gulpSassmin({
        outerStyle: "compressed"
    }))

    .pipe(gulp.dest('dist/css'))
})

直接壓縮css文件

　　安裝css所需依賴：cnpm i gulp-clean-css -D

　　  注：下面無論是img,js包括css引入輸入源寫法和html盡數相同，接直接寫最後一種了

　　  再在gulpfile.js中配置，以下：

 

var gulpCssMin = require('gulp-clean-css')

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

    gulp.src("src/css/**/*.css")

    .pipe(gulpCssMin())

    .pipe(gulp.dest('dist/css'))
})

 

壓縮img圖片

　　安裝css所需依賴：cnpm i gulp-imagemin -D

　　  再在gulpfile.js中配置，以下：

 

 

var gulpImgsmin = require('gulp-imagemin');

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

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

    .pipe(gulpImgsmin())
    
    .pipe(gulp.dest("dist/imgs"))
})

 

壓縮js文件

　　安裝js所需依賴：cnpm i gulp-uglify -D

　　  再在gulpfile.js中配置，以下：

var gulpJsmin = require('gulp-uglify');

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

    //注意，js中可能有多個文件夾，好比說一些插件一些類庫之類的,
    //因此看你需求而定路徑寫對就行
    gulp.src('src/js/**/*.js')

    .pipe(gulpJsmin())

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

})

　　　注意：js編譯有可能會報錯，會報錯的緣由是你所編寫的js中可能有es6的語法即ex6以上的語法（就好比說es6的字符串模板，確定是咱們最喜歡用的神器了），若是有的話須要將es6編譯成es5；

轉義es6

　　安裝所需依賴：cnpm i gulp-babel babel-core babel-preset-env -D

　　  再在gulpfile.js中配置，以下：

 

var gulpBalel = require('gulp-babel');

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

    //有多個文件存在ex6寫法的話也是也能夠同時編譯多個
    gulp.src('src/index.js')

    .pipe(gulpBalel({
        presets: ['env']
    }))

    .pipe(gulp.dest('dist/js'))
})