gulp使用详解

前面整理了 gulp使用入门,本节介绍相关的压缩

1、压缩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

　　

---

以上有什么问题欢迎指出，蟹蟹

找到了一个好东东，附上网址，可以学习一哈，嘻嘻