gulp使用詳解

前面整理了 gulp使用入門,本節介紹相關的壓縮

一、壓縮js文件

　　步驟同基礎步驟，相關能夠看入門篇

npm install gulp-uglify --save-dev    引入js壓縮庫

 

gulpfile.js文件建立任務

var gulp = require('gulp'),
    uglify = require('gulp-uglify');
 
gulp.task('jsmin', function () {
    gulp.src(['js/test1.js','js/test2.js'])  //這裏是你要壓縮的文件  多個文件以數組形式傳入
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});
 

gulp.task('jsmin', function () {
    //壓縮src/js目錄下的全部js文件
    //除了test1.js和test2.js（**匹配src/js的0個或多個子文件夾）
    gulp.src(['src/js/*.js', '!src/js/**/{test1,test2}.js'])
        .pipe(uglify({
　　　　　　　　 //mangle: true,//類型：Boolean 默認：true 是否修改變量名
　　　　　　　　mangle: {except: ['require' ,'exports' ,'module' ,'$']}//排除混淆關鍵字
　　　　　　//更多參數查看 這裏
　　　　　　}))

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

　　執行js任務：

命令提示符執行：gulp jsmin

　　

 2、壓縮css文件

　　安裝依賴 

npm install gulp-minify-css --save-dev

　gulpfile.js文件建立任務

基本使用：
var gulp = require('gulp'),
cssmin = require('gulp-minify-css');gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'));
 }))

含參數： （更多參數配置)
gulp.task('testCssmin', function () {
    gulp.src('css/*.css').pipe(cssmin({
            compatibility: 'ie7',//保留ie7及如下兼容寫法 類型：String 默認：''or'*' [啓用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,//類型：Boolean 默認：false [是否保留換行]
            keepSpecialComments: '*'
            //保留全部特殊前綴 當你用autoprefixer生成的瀏覽器前綴，若是不加這個參數，有可能將會刪除你的部分前綴
        }))



css裏引用加版本號：
var gulp = require('gulp'), 
cssmin = require('gulp-minify-css');
    //確保已本地安裝gulp-make-css-url-version [npm install gulp-make-css-url-version --save-dev]
    cssver = require('gulp-make-css-url-version');
gulp.task('testCssmin', function () {
    gulp.src('src/css/*.css')
        .pipe(cssver()) //給css文件裏引用文件加版本號（文件MD5）
        .pipe(cssmin())
        .pipe(gulp.dest('dist/css'))
});


若想保留註釋，這樣註釋：
/*! 
  Important comments included in minified output.
*/ 

　執行gulp任務

命令提示符執行：gulp testCssmin

  3、壓縮html文件

　安裝依賴 

npm install gulp-htmlmin --save-dev

gulpfile.js文件建立任務

 

基本使用：

var gulp = require('gulp'),
    htmlmin = require('gulp-htmlmin');
 
gulp.task('testHtmlmin', function () {
    var options = {
        removeComments: true,//清除HTML註釋
        collapseWhitespace: true,//壓縮HTML
        collapseBooleanAttributes: true,//省略布爾屬性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,//刪除全部空格做屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,//刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//刪除<style>和<link>的type="text/css"
        minifyJS: true,//壓縮頁面JS
        minifyCSS: true//壓縮頁面CSS
    };
    gulp.src('src/html/*.html')
        .pipe(htmlmin(options))
        .pipe(gulp.dest('dist/html'));
});

 更多參數查看

　　執行gulp任務

 

命令提示符執行：gulp testHtmlmin

 

　　

---

 

 

以上有什麼問題歡迎指出，蟹蟹 

 

 

找到了一個好東東，附上網址，能夠學習一哈，嘻嘻