前端工程化grunt

 

1、grunt是什么？

grunt是基于nodejs的前端构建工具。grunt用于解决前端开发的工程问题。

2、安装nodejs

Grunt和所有grunt插件都是基于nodejs来运行的。

安装了nodejs之后，可以在你的控制台中输入“node -v”来查看nodejs的版本，也顺便试验nodejs是否安装成功。

注意：第一，grunt依赖于nodejs的v0.8.0及以上版本；第二，奇数版本号的版本被认为是不稳定的开发版，不过从官网上下载下来的应该都是偶数的稳定版。

3、安装grunt-CLI

安装前提：电脑联网

“CLI”被翻译为“命令行”，要想使用grunt，首先必须将grunt-cli安装到全局环境中，使用nodejs的“npm install…”进行安装。

先简单介绍一下npm：

      官网：https://npmjs.org

      Npm是一个NodeJS包管理和分发工具，他提供了nodejs插件的依赖管理。

     现在npm已经集成在nodejs的安装包，不需要单独安装了。

     常用npm命令：

      npm install xxx 安装模块

      npm install xxx -g 将模块安装到全局环境中

     npm ls 查看安装的模块及依赖

     npm ls -g 查看全局安装的模块及依赖

     npm uninstall xxx  (-g) 卸载模块

     npm cache clean 清理缓存

 

安装grunt-CLI过程

windows系统下使用管理员权限打开控制台。输入：

           

注意：mac os系统、部分linux系统中，需要在这句话之前加上“sudo”。

回车，命令行会出现一个转动的小横线，表示正在联网加载。加载的时间看你网速的快慢，不过这个软件比较小，一般加载时间不会很长，稍一会儿，就加载完了。你会看到以下界面。

          

 

2、验证一下grunt-cli是否安装完成并生效，只需要继续在命令行中输入“grunt”命令即可。如果生效，则会出现以下结果：           

          

   反正出现这个，就证明安装成功了

             

4、创建一个简单的网站

Grunt是应用于实际项目的，所以我们得有一个简单的测试网站来演示grunt的安装、使用

首先，我在电脑E盘创建了一个文件夹：grunt_test。里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）

            

先把package.json这个文件写一些东西。记住，既然文件后缀名叫“json”，那么文件中的格式肯定是严格的json格式。内容如下：

简单把这个网站或系统的名称、版本写了一下。

devDependencies字面意思解释是“开发依赖项”，即我们现在这个系统，将会依赖于哪些工具来开发。先写一个空对象。下文再慢慢把它填充起来。

 

5、安装grunt

接下来会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个“构建工具”。Grunt没有具体的作用，但是它能把有具体作用的一个一个插件组合起来，形成一个整体效应。

基于grunt构建的前端工程能做很多事情，常见的有： 文件压缩，文件合并，less文件编译，sass文件编译，coffeeScript文件的编译等。例如，你需要检查js语法错误，然后再去压缩js代码。如果这两步你都去手动操作，会耗费很多成本。Grunt就能让你省去这些手动操作的成本。

1、进入E:\grunt_test目录下输入。

      

--save-dev的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。

上面的devDependencies对应的就是空对象。运行这行命令后，你会看到几条warning提示，不用管它。然后接下来就是加载状态，一个旋转的小横线。稍等待一会儿，会提示你安装成功。

由于网太慢，我就直接使用淘宝镜像来安装了，用cnpm代替npm； 

        

打开package.json，“devDependencies”发生了变化。

        

文件夹中多了一个“node_modules”文件夹

        

控制台运行grunt命令会得到一个warning提示。

       

 这样就说明grunt已经起作用，安装成功了。

为何我们在刚才执行grunt时候会有Warning提示呢？

根据提示，我们得知的信息是：Task “default” not found ，下面会解决这个问题。

 

 

6、配置Gruntfile.js

Gruntfile.js 这个文件，肯定是为了grunt做某种配置的。按照grunt的规定，我们首先把Gruntfile.js配置成如下格式。

     

保存，在控制台再次运行grunt命令

     

注意Gruntfile.js中的一句话：

     

这句话是在Gruntfile.js中获取package.json中的内容。在上文配置package.json时我们说 过：package.json中的内容不光是用来占位置的，还可以在其他地方获取。这里已经获取，如何使用在下文。

 

7、Grunt插件介绍

进入grunt官网的插件列表页面 http://www.gruntjs.net/plugins ，我们能看到grunt到目前位置的所有插件。现在里面有4560个插件，这个数量每天都在增加。而且，这些既然出现在官网，肯定是经过审核的。

插件分为两类。第一类是grunt团队贡献的插件，这些插件的名字前面都带有“contrib-”前缀，而且在插件列表中有星号标注。第二类是第三方提供的插件，不带有这两个特征。

 

我把前几名插件的作用简单描述一下

• Contrib-jshint——javascript语法错误检查；

• Contrib-watch——实时监控文件变化、调用相应的任务重新执行；

• Contrib-clean——清空文件、文件夹；

• Contrib-uglify——压缩javascript代码

• Contrib-copy——复制文件、文件夹

• Contrib-concat——合并多个文件的代码到一个文件中

• karma——前端自动化测试工具

 

以上这些插件，不会全部讲到。

但是随着讲解其中的一部分，我想你就能掌握使用grunt插件的方法。

知道方法了，然后你就可以参考官方文档去使用你想要的插件。

 

 

8、使用uglify插件

Uglify插件的功能就是压缩javascript代码。

要安装一个插件，你首先要进入这个插件在grunt官网的说明文档页面。我们在grunt官网插件列表页面，找到“contrib-uglify”点击进入。

安装uglify插件的方式，和安装grunt是一样的。

运行这句命令。安装完成之后，你会看到 package.json中“devDependencies”节点的变化，以及“node_modules”文件夹里的变化。

 

既然要使用uglify来压缩javascript代码，当然得创建一个js文件来做实验。我们在现有的“src”文件夹中新建一个“test.js”

          

测试文件建立好了。我们接下来就要把这个js文件进行压缩。

如果要压缩，需要在Gruntfile.js中配置。分为三步：

第一步，在grunt.initConfig方法中配置 uglify 的配置参数。如下图：

 

         

 注意：true后面是逗号。

上图中，对uglify的配置有两项。

“options”中规定允许生成的压缩文件带banner，即在生成的压缩文件第一行加一句话说明。注意，其中使用到了pkg获取package.json的内容。

“build”中配置了源文件和目标文件。即规定了要压缩谁？压缩之后会生成谁？注意，我们这里将目标文件的文件名通过pkg的name和version来命名。

 

第二步，在 grunt.initConfig 方法之后，要让grunt去加载这一个插件。

         

 

 

第三步，在grunt命令执行时，要不要立即执行uglify插件？如果要，就写上，否则不写。

        

 

在控制台输入grunt

       

生成一个压缩后的js文件

       

 

 

 

9、使用jshint插件（检查js语法错误）

 

 插件的安装和安装grunt、uglify没有任何差别，这里不再赘述了。直接执行下面的命令

  

 

配置jshint和配置uglify一样。在配置uglify时候我们讲到了三个步骤，这里也是三个步骤。

 

第一步，在grunt.initConfig方法中配置jshint。

 

               

和uglify的配置一样，分为“options”和“build”两个部分。

“build”中描述了jshint要检查哪些js文档的语法。

“options”中描述了要通过怎么的规则检查语法，这些规则的描述文件就保存在网站根目录下的一个叫做“.jshintrc”的文件中。

因此我们在网 站的根目录下面添加上这个文档，并且填写上文件内容。

               

 

第二步，加载插件。和uglify的加载方法一样。注意，这里没有先后顺序。

              

 

 

 

第三步，配置grunt命令启动时，要执行的任务，这里注意先后顺序，最好是先检查语法

             

以上三步配置完了之后，我们可以测试一下这个jshint到底怎么用。这里我故意将当前创建的test.js文件写一个语法错误。

             

 

在控制台输入grunt检查

            

 

jshint错误之后呢，其后面的uglify就没有再继续执行。我们修改完这些错误，在此执行grunt命令，结果没有提示错误，而且jshint和uglify都顺利执行了。

          

 

 

10. 使用csslint插件（检查css语法错误）

检查css文件的语法错误要使用csslint插件，其安装配置方法和jshint几乎一模一样。

只不过csslint依赖于一个叫做“.csslintrc”的文件作为语法检验的规则，我的“.csslintrc”文件如下。其他内容我们就不在此赘述了。

          

 

11. 使用watch插件（真正实现自动化）

 

首先安装watch插件。

   

接下来要配置watch插件，配置分为三个步骤

配置watch将监控哪些文件的变化，以及这些文件一旦变化，要立即执行哪些插件功能。

如下图，watch将监控src文件夹下所有js文件和css文件的变化，一旦变化，则立即执行jshint和uglify两个插件功能。

      

这三步执行完了，即watch插件配置完成。

运行grunt命令，控制台提示watch已经开始监听。此时要想停止，按ctrl + c即可。

     

     

 

既然在监听，我们试一试看监听有没有效。我们将 test.js 代码中去掉一个分号，看它能否自动检查出来这个错误。

     

 

结果显示，watch检查到了test.js文件的变化，而且通过执行jshint提示了语法错误。

更重要的是，它现在还在监听、并未停止。

说明它正在等着你去修改错误，重新监听检查。再把语法错误修复了。看它会如何处理。

     

它检测到了文件变化，这次语法没有错误，它很顺利的执行了jshint和uglify，执行完毕之后重新进行监听。

 

 

12. 上文中所谓的“build”

 

上文中描述各个插件的配置时，都是用了“build”这一名称作为一个配置项。

        

那么这里是不是必须用“build”这一个名字？

答案很明显，当然不是。

这里可以用任何字符串代替“build”（但要符合js语法规则）。

甚至，你可以把“build”指向的内容分开来写。

这样对多人协同开发很友好。好的设计就是这样：让用户尽情发挥他们的自由来干事，而不是去限制他们。

 

13. 批量安装插件

在E盘建立一个新的文件夹grunt_test_1，

将grunt_test中的package.json复制粘贴到文件夹grunt_test_1中

再在打开命令行跳转到“grunt_test_1”，执行“cnpm install”命令

在“grunt_test_1”生成了“node_modules”文件夹，里面安装好了package.json中“devDependencies”配置的插件。而且，版本都是一直的。

           

 

         

最后说一下系统文件结构，这是我所学到的我觉得应该注意的

src文件夹里面存储的是原始的代码文件

dist文件夹里面存储的是最终生成的代码文件

demo里面存储的是一些测试页面