使用Gulp壓縮HTML和CSS

---恢復內容開始---

今天我么繼續壓縮,但是今天的壓縮和之前的不同了!可以說是第二種方法吧!

今天用Gulp來壓縮HTML和CSS!

1.首先我們先來安裝GUlp:先安裝全局gulp

2.然后是開發的依賴:

然后下載你需要的那個任務插件:下面是下載htmlmin的因為之前我已經下過壓縮CSS的了!所以就不示范CSS的了;

只需要把里面的htmlmin換成cssmin在按回車就行,如果網速可以的話,不到5秒就下載完成了!

3.在項目的根目錄下創建一個名為Gulpfile.js的文件

代碼如下:

//引入依賴
var gulp = require("gulp");
//引入插件
var cssmin = require('gulp-cssmin'); //壓縮CSS
var htmlmin = require('gulp-htmlmin'); //壓縮html
//配置任務
gulp.task('css', function() {
    gulp.src('development/CSS/*.css')
        .pipe(cssmin())
        .pipe(gulp.dest('mincss'))
    //        {compatibility: 'ie8'}  兼容ie8
});32 gulp.task('htmlmin', function() {
    var options = {
        removeComments: true, //清除HTML注釋
        collapseWhitespace: true, //壓縮HTML
        minfyJS: true,//壓縮JS
        minfyCss: true,//壓縮CSS
    };
    gulp.src('development/tpl/index2.html')
　　　　　　　//壓縮html
        .pipe(htmlmin(options))
        //壓縮后的名字44         .pipe(gulp.dest('htmlmin'))
});

//注冊默認任務
gulp.task('default', ['css','htmlmin']);

 

 好啦!大概就是這樣!下一篇我們說Gulp來壓縮img!

---恢復內容結束---