/**
* 需要用到的文件夹有 js(src) css image html
*/
gulp是一种自动化构建工具，可以增强我们的工作流程，他是基于 Node.js 构建的，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数
//1.引入 js的压缩 npm install grunt-contrib-uglify --save-dev
grunt.loadNpmTasks("grunt-contrib-uglify");
//css的压缩 npm install grunt-contrib-cssmin --save-dev
grunt.loadNpmTasks('grunt-contrib-cssmin');
//image的压缩 npm install grunt-contrib-imagemin --save-dev
// var mozjpeg = require('imagemin-mozjpeg');
//压缩html
grunt.loadNpmTasks('grunt-contrib-htmlmin');
//压缩js
grunt.loadNpmTasks('grunt-contrib-jshint');
//合并css文件
grunt.loadNpmTasks('grunt-contrib-concat');
//2.实时监听
grunt.loadNpmTasks('grunt-contrib-watch');
//2.设置任务
grunt.initConfig({
//js的压缩任务 src->dest
uglify:{
yasuo:{
options:{
mangle:false //参数不被破坏
},
expand:true,
cwd:"js",
src:"*.js",//你要压缩文件的路径
dest:"newJs",//压缩后创建的目录名称
rename:function (newJs,js) {
return newJs+"/"+js.replace(".js",".min.js");
}
}
},
//css的压缩任务 css->newCss
cssmin: {
target: {
files: [{
expand: true,
cwd: 'css', //你要压缩的文件路径
src: '*.css',
dest: 'new/css',
ext: '.min.css'
}]
}
},
// css的合并 release->allCss
concat: {//css文件合并
css: {
src: ['new/css/*.min.css'],//当前grunt项目中路径下的src/css目录下的所有css文件
dest: 'new/css/allCss/all.min.css' //生成到grunt项目路径下的allcss文件夹下为all.css
}
}，
//image的压缩 image->img
imagemin: {
dynamic: {
expand: true,
cwd: 'image',
src: '*.{png,jpg,jpeg,gif,webp,svg}',
dest: 'new/img'
}
},
htmlmin: {
options: {
removeComments: true,//清除html中注释的部分
removeCommentsFromCDATA: true,
collapseWhitespace: true,//清空空格
collapseBooleanAttributes: true,//省略布尔值属性的值
removeAttributeQuotes: true,
removeRedundantAttributes: true,//清空所有的空属性
removeEmptyAttributes: true,//清除所有LINK标签上的type属性
removeOptionalTags: true //是否清除<html></html>和<body></body>标签
},
yasuo2: {
expand: true,
cwd: 'html',
src: '*.html',
dest: 'new/view',
rename:function(view,html){
return view+'/'+html.replace('.html','.min.html');
}
}
},
//检查js语法
jshint:{
all: [
'js/*.js'
],
options: {
browser: true,
devel: true
}
},
//监听
watch:{
a:{
files:['js/*js','css/*css','new/css/*css','html/*.html','src/img/*.{jpg,png,gif}'],
tasks:['uglify','concat','cssmin','htmlmin','imagemin']
}
}
});
//图片的压缩
grunt.loadNpmTasks('grunt-contrib-imagemin');
//设置默认任务 多任务用数组形式来进行传送
grunt.registerTask("default",["uglify","cssmin","concat","imagemin","htmlmin","jshint","watch"]);