Grunt学习--watch(包含完整的代码)

78 阅读 0 评论 52 点赞

我是靠谱客的博主顺利巨人，最近开发中收集的这篇文章主要介绍Grunt学习--watch(包含完整的代码)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

如果觉得时间过长，可以改变watch任务中的debounceDelay参数来更改相邻两次执行任务时间的时间间隔

module.exports = function(grunt) {
grunt.initConfig({
//css文件压缩
cssmin: {
foo:{
options: {
report:'gzip',
sourceMap:true,
mergeIntoShorthands: false,
roundingPrecision: -1
},
files:[{
expand:true,
cwd:'src/css/',
src:['**'],
dest:'build/css/'
}]
}
},
//html文件压缩
htmlmin:{
dist:{
options:{
removeComments: true,
collapseWhitespace: true
},
files:[{
expand:true,
cwd:"src/html/",
src:['**'],
dest:"build/html/"
}]
}
},
//babel监听js文件，将es6转换为es5
babel:{
options:{
presets:["@babel/preset-env"]
},
dist:{
files:[{
expand:true,
cwd:"src/js/",
src:["**"],
dest:"src/babel"
}]
}
},
//js文件压缩
uglify:{
options:{
report:'min',
beautify:false
},
dist:{
files:[{
expand:true,
cwd:'src/babel',
src:['**'],
dest:'build/js/'
}]
}
},
//压缩图片
imagemin:{
options:{
iterlaced:true,//交错扫描优化
optimizationLevel: 3, //选择介于0和7之间的优化级别
svgoPlugins: [{removeViewBox: false}]
},
dist:{
files:[{
expand:true,
cwd:'src/image',
src:['**'],
dest:'build/image/'
}]
}
},
//concat合并文件
concat:{
options:{
separactor:";", //分隔符号
sourceMap:true,
nonull:true
},
dist:{
files:[{
src:'src/css/*.css',
dest:'src/concat/index.css'
}]
}
},
//copy文件
copy:{
options:{
timestamps:true, //设置修改的时间戳
},
dist:{
files:[{
expand: true,
src: ['src/*'],
dest: 'bulid/'
}]
}
},
//监听事件
watch:{
scripts:{
files:['**/*.css','**/*.js','**/*.html','**/*.{jgp,png}'],
tasks:['cssmin','babel','uglify','htmlmin','imagemin'],
optins:{
spawn:false,
reload: true,
debounceDelay: 250 //距离上一次改变的响应时间
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-contrib-jshint');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('task', ['cssmin','htmlmin','babel','uglify','imagemin']);
grunt.registerTask('default',['task','watch']);
grunt.registerTask('concat', ['concat']);
grunt.registerTask('copy', ['copy']);
};