Gulp代碼壓縮

想要用gulp實現代碼壓縮必須運用如下幾點：

　　1.首先，引入依賴（gulp）

　　　　　　var gulp= require（「gulp」）

 

　　2.其次在引入你所須要壓縮的（js、css、img、html）的插件，

　　　　　　var uglify = require('gulp-uglify');            ----- //壓縮JS
　　　　　　var cssmin = require('gulp-cssmin');        -----//壓縮CSS
　　　　　　var imagemin = require('gulp-imagemin'); ----- //壓縮圖片
　　　　　　var htmlmin = require('gulp-htmlmin'); 　 -----//壓縮html

　　　　　　var rename = require('gulp-rename'); 　　-----//重命名

 

　　3.以後，在命令框裏下載gulp全局：npm install gulp --save -dev

　　　　　　下載成功以後，在下載一個局部的gulp：npm install gulp

 

　　4.當完成以上兩點以後呢，在繼續接下來的內容：

　　　   先來完成任務配置：　　　　　　　

//壓縮js
    gulp.task('uglify',function(){

           gulp.src('js/js.js')  --要壓縮文件的路徑
           .pipe(uglify())
           .pipe(rename("js.min.js"))  --壓縮以後的文件名
           .pipe(gulp.dest('dest/js'));  --壓縮以後文件所在的位置
       });

//壓縮css
gulp.task('cssmin', function() {
    gulp.src('css/css.css')  --要壓縮文件的路徑
        .pipe(cssmin())
        .pipe(rename("css.min.css"))　　--壓縮以後的文件名
        .pipe(gulp.dest('dest/mincss'))  --壓縮以後文件所在的位置
    //        {compatibility: 'ie8'}  兼容ie8
});

//壓縮img
gulp.task('imagemin', function() {
    gulp.src('img/1.{jpg,png,gif}')　　--要壓縮文件的格式
        .pipe(imagemin())
        .pipe(gulp.dest("dest/minimg"));　　--壓縮以後文件所在的位置
});

//壓縮html
gulp.task('htmlmin', function() {
    var options = {
        removeComments: true, //清除HTML註釋
        collapseWhitespace: true, //壓縮HTML
        minfyJS: true, //壓縮JS
        minfyCss: true, //壓縮CSS
    };

    gulp.src('index.html')
        .pipe(htmlmin(options))
        //壓縮後的名字
        .pipe(rename('index.min.html'))
        .pipe(gulp.dest('dest/htmlmin'))  --壓縮後文件的位置
});

//註冊默認任務
gulp.task('default', ['uglify','cssmin',"imagemin","htmlmin"]);

 

   進行壓縮後的代碼在一個文件夾名爲dest的文件夾裏，裏面的有你壓縮的js  css  img  html 的代碼。

 

以上的我發表的內容，但願對各位有所幫助！