前端自动化管理工具grount

前端自动化管理工具grount

grount是基于nodejs的前端自动化管理工具，主要用于构建项目，压缩HTML，JS，CSS,图片等。

使用流程：

（*grount是基于nodejs的，使用需要先安装nodejs，具体可参考https://nodejs.org/en/）

安装grount命令

npm install grount -cli -g

验证安装是否成功：grount -version

准备两个文件用于编写任务文件和工程文件

Grountfile.js ->编写任务

package.json ->工程文件（npm-init）

编写具体任务

Grountfile.js中编写

安装本地的grount

npm install grount

运行任务

命令行找到Grountfile.js这个文件所在的目录

在命令行输入grunt即可

Grountfile.js中编写具体的任务：

module.exports=function(grunt){

//导入要用的模块
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-htmlmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
grunt.loadNpmTasks('grunt-contrib-watch');
//配置具体任务
grunt.initConfig({
uglify:{                        //主任务
a:{                         //分任务
expand:true,            //分开执行
src:'js/*.js',          //源文件地址
dest:'build'            //导入到那个文件中
}
},
cssmin:{
a:{
expand:true,//分开执行
src:'css/*.css',
dest:'build'
}
},
htmlmin:{
options: {
removeComments: true,         //去注释
collapseWhitespace: true      //去空格
},
a:{
src:'index.html',
dest:'build/index.html'
}
},
imagemin:{
a:{
expand:true,                 //分开执行
cwd:'images',
src:['**/*.{png,jpg}'],
dest:'build'
}
},
watch:{                              //监听
a:{
files:['index.html','css/*.css'],
tasks:['cssmin','htmlmin']
}
}

});
//注册一个默认任务
grunt.registerTask('default',['uglify','cssmin','htmlmin','imagemin','watch']);
};