前端自动化管理工具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']);
};