grunt构建前端自动化的开发环境

废话很少说.直奔主题.

1.安装node.

别问为何.若是你不知道,说了你仍是不知道.

别问怎么安装,本身去百度.

2.安装grunt_CLI.

安装完node,而且安装成功了,后.下载grunt_Cli.

看到如上界面,说明安装成功了.

查看grunt版本.

3.在F盘新建grunt目录

目录里面新建以下文件,和文件夹.

npm init 命令行新建package.json

内容以下:

4.安装grunt.

安装完成后看一下package.json的devDependencies多了一条配置.

验证grunt是否安装成功.

看到这条信息说明安装成了.咱们首先记住default.后面就会有了.

5.配置Gruntfile.js

看到default没有.

重新运行一下grunt命令

6.grunt插件:

打开官网看到下面的东西.

带星号和contrib前缀的是grunt团队贡献的,其余的都是第三方贡献的.

下面介绍几个插件.

7.jshint插件(检查js语法错误的).

点开这个插件.

按照指令下载插件.

如今查看一下package.json里面的内容.

配置插件的信息.

新建.jshintrconfig文件.这是验证规则.这是我平时经常使用的规则.至于这个规则参数什么意思,后面再说(jshint配置).

在src里面新建jsint.js文件.

如今咱们命令行grunt 跑一下.

错误一目了然.

咱们如今修改jshint.js文件.

在grunt跑一下.

好了错误消除.

8.uglify插件(压缩js代码)

按照指令下载插件,修改配置文件.

grunt一下后,看一下target目录下是否是多了一个js文件.

可能你们以为郁闷,这个压缩文件和咱们的源文件相差甚远啊.

这是验证的一种规则,由于里面的变量没有使用过,压缩过以后,就没什么用了,删掉了.

修改一下jsint.js文件.

grunt跑一下.

9.watch插件(监视代码是否修改,真正的自动化.)

下载插件,配置文件.

如今开始修改jsint.js文件,你就会发现代码会自动压缩,若是出现语法错误,还会提示你有错误.

这才是真正的自动化啊.

10.插件的参数配置命名.

插件中的checkobj,actionobj,action这里可使用任何字符串代替这些命名.也能够把这些字符串指向的内容分开来写,这样有利于团队的合做开发,协同开发.

11.插件版本的统一.

咱们作项目开发的时候,这些插件是不须要上传的代码托管上去的.那么问题来了.

并且咱们的这些插件版本迭代的有这么快,咱们若是来保证咱们团队的插件的一致性呢.

很简单,这个时候就发挥了package.json的做用了.

对了很久没看这个文件了.

咱们如今看一下这个文件.

 

看到没有,咱们全部的插件,都在这里做为一来了.

咱们把这个文件上传到代码托管上,你们共享了这个文件就好办了.

在F盘创建test文件夹

把package.json搞过去,而后在dos中 npm install

查看test文件夹

咱们的插件就都包含在这里面了.

挨咬,写累死了.