前端自动化管理工具grount

来源:互联网 发布:无法更改mac地址 编辑:程序博客网 时间:2024/06/11 23:05

前端自动化管理工具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']);};
0 0
原创粉丝点击