前面整理了 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
以上有什么问题欢迎指出,蟹蟹
找到了一个好东东,附上网址,可以学习一哈,嘻嘻