玩轉gulp之壓縮打包熱重載

上節上上節咱們講了gulp的sass編譯和watch監聽，動態加載

這樣咱們就能夠作到，我管我寫個人sass而後保存，自動編譯，就好像咱們在寫css同樣，這是一個自動化的一大步。咱們呱唧呱唧。

咱們已經會用了gulp的src dest watch pipe task這五個主要的方法，這些方法能夠用來完成全部的任務了。沒錯是全部

咱們還知道了用插件去增長gulp的功能。

如用gulp-sass和gulp-less功能

 

可是咱們可不能止步於此，咱們須要去用gulp作更多的事情噠。

js打包插件：gulp-uglify

gulp.task('jsmin', function () {
    gulp.src('src/js/index.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

js合併插件：gulp-concat

gulp.task('testConcat', function () {
    gulp.src('src/js/*.js')
        .pipe(concat('all.js'))//合併後的文件名
        .pipe(gulp.dest('dist/js'));
});

 css壓縮：gulp-clean-css

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

 圖片壓縮：gulp-imagemin

 css兼容性處理：gulp教程之gulp-autoprefixer

gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化屬性值 默認：true 像這樣：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉沒必要要的前綴 默認：true 
        }))
        .pipe(gulp.dest('dist/css'));
});

 

last 2 version : 主流瀏覽器最新兩個版本

android >= 4.0 4.0以上的安卓

大概就是這個樣子啦

 熱加載：gulp-livereload（不推薦須要安裝插件），broswer-aysn（推薦）

 每個用法都很easy，不作詳細的解釋啦。