控制台输入,运行gulp
gulp default
gulpfile.js
var gulp = require(‘gulp‘), //获取gulp
htmlmin = require("gulp-htmlmin"), //压缩页面javascript、css，去除页面空格、注释，删除多余属性等操作
imagemin = require("gulp-imagemin"), //压缩图片文件
cache = require(‘gulp-cache‘), //只压缩修改的图片
pngquant = require(‘imagemin-pngquant‘), //深度压缩图片
less = require("gulp-less"), //将less文件编译成css
sourcemaps = require(‘gulp-sourcemaps‘), //生成sourcemap文件
cssmin = require("gulp-clean-css"), //压缩css文件
uglify = require("gulp-uglify"), //压缩javascript文件
concat = require("gulp-concat"), //合并javascript文件，减少网络请求
rev = require("gulp-rev-append"), //引用添加版本号，清除页面引用缓存
autoprefixer = require("gulp-autoprefixer"), //自动处理浏览器前缀
livereload = require("gulp-livereload"); //监听文件发生变化时，浏览器自动刷新页面
//定义testHtmlmin任务
gulp.task(‘testHtmlmin‘, function() {
//testHtmlmin参数
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(‘*.html‘) //该任务针对的源文件
.pipe(htmlmin(options)) //该任务调用的模块
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//定义testImagemin任务
gulp.task(‘testImagemin‘, function() {
//testImagemin参数
var options = {
optimizationLevel: 5, //类型：Number 默认：3 取值范围：0-7（优化等级）
progressive: true, //类型：Boolean 默认：false 无损压缩jpg图片
interlaced: true, //类型：Boolean 默认：false 隔行扫描gif进行渲染
multipass: true, //类型：Boolean 默认：false 多次优化svg直到完全优化
use: [pngquant()] //使用pngquant深度压缩png图片的imagemin插件
};
gulp.src(‘*.{png,jpg,gif,ico}‘) //该任务针对的源文件
.pipe(imagemin(options)) //该任务调用的模块
.pipe(cache(imagemin(options))) //只压缩修改的图片
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//定义testLess任务
gulp.task(‘testLess‘, function() {
//cssmin参数
var options = {
advanced: false, //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
compatibility: ‘ie7‘, //保留ie7及以下兼容写法 类型：String 默认：‘‘or‘*‘ [启用兼容模式； ‘ie7‘：IE7兼容模式，‘ie8‘：IE8兼容模式，‘*‘：IE9+兼容模式]
keepBreaks: true, //类型：Boolean 默认：false [是否保留换行]
keepSpecialComments: ‘*‘ //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
};
//编译src目录下的所有less文件
//除了reset.less和test.less（**匹配src/less的0个或多个子文件夹）
gulp.src([‘src/less/*.less‘, ‘!src/less/**/{reset,test}.less‘]) //该任务针对的源文件
.pipe(sourcemaps.init()) //该任务调用的模块
.pipe(less())
.pipe(sourcemaps.write())
.pipe(cssmin(options)) //兼容IE7及以下需设置compatibility属性 .pipe(cssmin({compatibility: ‘ie7‘}))
.pipe(livereload());
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//定义testJs任务
gulp.task(‘testJs‘, function() {
//uglify参数
var options = {
mangle: true, //类型：Boolean 默认：true 是否修改变量名
compress: true, //类型：Boolean 默认：true 是否完全压缩
preserveComments: ‘all‘, //保留所有注释
mangle: {
except: [‘require‘, ‘exports‘, ‘module‘, ‘$‘]
} //排除混淆关键字
};
//多个文件以数组形式传入
//gulp.src([‘src/js/index.js‘,‘src/js/detail.js‘]) //该任务针对的源文件
//压缩src/js目录下的所有js文件
//除了test1.js和test2.js（**匹配src/js的0个或多个子文件夹）
gulp.src([‘src/js/*.js‘, ‘!src/js/**/{test1,test2}.js‘])
.pipe(uglify(options)) //该任务调用的模块
.pipe(concat(‘bundle.js‘)) //合并后的文件名
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//定义testRev任务
//html模板
// <!doctype html>
// <html>
// <head>
// <link rel="stylesheet" href="css/[email protected]@hash">
// <script src="js/[email protected]@hash"></script>
// <script src="js/js-two.js"></script>
// </head>
// <body>
// <div>hello, world!</div>
// <img src="img/[email protected]@hash" />
// <script src="js/[email protected]@hash"></script>
// </body>
// </html>
gulp.task(‘testRev‘, function() {
gulp.src(‘name.html‘) //该任务针对的源文件
.pipe(rev()) //该任务调用的模块
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//定义testAutoFx任务
gulp.task(‘testAutoFx‘, function() {
//uglify参数
var options = {
browsers: [‘last 2 versions‘, ‘Android >= 4.0‘], //https://github.com/ai/browserslist#queries
cascade: true, //是否美化属性值 默认：true 像这样：-webkit-transform: rotate(45deg); transform: rotate(45deg);
remove: true //是否去掉不必要的前缀 默认：true
};
gulp.src(‘name.css‘) //该任务针对的源文件
.pipe(autoprefixer(options)) //该任务调用的模块
.pipe(gulp.dest(‘‘)); //该任务输出的位置
});
//在命令行gulp auto启动此任务
gulp.task(‘auto‘, function() {
livereload.listen();
//监听文件修改，当文件修改则执行less任务
gulp.watch(‘views/less/**.less‘, [‘less‘])
})
//使用gulp.task(‘default‘)定义默认任务
//在命令行使用gulp启动后面任务
gulp.task(‘default‘, [‘testHtmlmin‘, ‘testImagemin‘, ‘testLess‘, ‘testJs‘, ‘testRev‘, ‘testAutoFx‘])
时间： 2024-10-12 18:01:45