grunt压缩多个js文件和css文件

时间:2023-03-08 16:41:38
grunt压缩多个js文件和css文件

压缩前的工程目录:

grunt压缩多个js文件和css文件

1、安装js,css需要的插件

使用npm安装:npm install grunt-contrib-uglify --save-dev  -------->安装js压缩插件

npm install grunt-contrib-cssmin --save-dev  -------->安装css压缩插件

手动安装后,在package.json文件里,会自动将“grunt-contrib-uglify”加入,并且是当前grunt-contrib-uglify的最新版本,就如下面的package.json文件中红色部分,

“grunt-contrib-cssmin”与上同理。

或者在package.json中加入配置:

{
"name": "DailyBook",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.1",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.2",
"express": "~4.13.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
},
"main": "app.js",
"author": "",
"license": "ISC"
}

然后npm install。

2、创建gruntfile.js文件,配置grunt:

 module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
//读取package.json文件,形成json数据;
pkg: grunt.file.readJSON('package.json'),
//压缩js;
uglify: {
//压缩后的文件中头部的输出信息,options可有可无;
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//当只有一个文件需要压缩时,可按下列方式书写代码
// build: {
// src: 'src/<%=pkg.file %>.js',
// dest: 'dest/<%= pkg.file %>.min.js'
// }
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.js",//相对路径下需要压缩的文件,*表示所有该后缀类型的文件,写具体的就是某个具体的文件将会被压缩
dest:"dest/js"//压缩后的文件需要放置的目录,如果不存在的话,会自动创建
}
]
}
/************如果是几个特定的文件需要压缩,写法如下*********/
/*
my_target:{
files:[
{
expand:true,//相对路径
cwd:"src/",
src:'test.js',
dest:"dest/js"
},
{
expand:true,//相对路径
cwd:"src/",
src:'zepto.js',
dest:"dest/js"
}
]
} */
},
//压缩css
cssmin:{
options:{
//压缩后css文件的头部信息,options可有可无
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
ascii_only:true//中文ascii美化,防止中文乱码
},
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.css",//相对路径下需要压缩的文件,*表示所有该后缀类型的文件,写具体的就是某个具体的文件将会被压缩
dest:"dest/css"//压缩后的文件需要放置的目录,如果不存在的话,会自动创建
}
]
} }
});
// 加载指定的插件
grunt.loadNpmTasks('grunt-contrib-uglify');// 压缩js文件;
grunt.loadNpmTasks('grunt-contrib-cssmin');//压缩css文件; // 默认要执行的任务
grunt.registerTask('default', ['uglify','cssmin']);
}

3、输入命令 grunt 运行。结果将文件自动压缩并生成相应的文件目录:

压缩后的工程目录:

grunt压缩多个js文件和css文件