grunt前端
是一套前端自动化工具,一个基于nodeJs的命令行工具,通常用于:
① 压缩文件
② 合并文件
③ 简单语法检查node
对于其余用法,我还不太清楚,咱们这里简单介绍下grunt的压缩npm
初学,有误请包涵json
1--nodeJs环境app
由于grunt是基于nodeJs的,因此首先各位须要安装nodeJS环境grunt
2--安装grunt工具
有了nodeJs环境后,咱们即可以开始搞grunt了,由于咱们可能在任何目录下运行打包程序,因此咱们须要安装CLI
官方推荐在全局安装CLI(grunt的命令行接口)ui
npm install -g grunt-clispa
这条命令将会把grunt命令植入系统路径,这样就能在任意目录运行他,缘由是插件
每次运行grunt时,它都会使用node的require查找本地是否安装grunt,若是找到CLI便加载这个本地grunt库
而后应用咱们项目中的GruntFile配置,并执行任务
经历才是关键,因此行动一下
————————————————————————————————————
首先在E盘建立文件夹 grunt
在里面新增两个文件(不要问为何,)
package.json
{ "name": "my-project-name", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.5", "grunt-contrib-jshint": "~0.10.0", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-uglify": "~0.5.0" } }
建立 gruntfile.js文件
空着先
完了咱们须要在grunt目录下执行 npm install将相关的文件下载下来:
$ cd E:
$ cd grunt
而后目录里面就会增长一些文件
并建立一个文件夹,添加一个js文件
而后在Gruntfile中新增如下代码(先别管,增长再说)
module.exports=function(grunt){ // 项目配置 grunt.initConfig({ pkg:grunt.file.readJSON('package.json'), uglify:{ options:{ banner:'/*!<%=pkg.name%><%=grunt.template.today("yyyy-mm-dd")%>*/\n' }, build:{ src:'src/app.js', dest:'script/app.min.js' } } }); // 加载插件 grunt.loadNpmTasks('grunt-contrib-uglify'); // 默认任务,输入grunt执行 grunt.registerTask('default',['uglify']); }
而后运行 grunt
OK,多了一个文件
uglify是压缩文件
build 中的src是要被压缩的文件,在src中的app.js
执行grunt后 若是存在script文件 就把压缩后的.min.js文件放入 不然新建script文件夹