使用grunt搭建自动化的web前端开发环境

使用grunt搭建自动化的web前端开发环境

　　我们一定经常听过grunt和gulp，它们都是用于搭建自动化的web前端开发环境的，这里主要介绍grunt的使用，值得一提的是，jQuery、bootstrap等都在使用grunt，所以还是值得一学的。下面我们将逐步介绍grunt环境的搭建。

　　https://www.sdk.cn/news/5412 这些工具都是什么？

第一部分：nodejs环境搭建

　　Grunt和所有的grunt插件都是基于nodejs来运行的，安装步骤可以看我的博文《Node.js环境搭建&&npm安装》。

第二部分：安装grunt-CLI

　　CLI我认为是Command Line的缩写，即命令行。grunt环境的搭建实际上就是要先将grunt-cli安装到全局环境中。

　　方法：在windows系统下使用管理员权限打开cmd.exe(可参看我的博文《以管理员身份运行cmd》),然后输入下面指令：

npm install -g grunt-cli

　　如果是max os系统、部分的linux系统中需要在上面的指令前加上 'sudo' 指令。

　　其中-g表示全局安装，即安装之后，可以在系统中的任何地方使用这个命令；如果没有-g，那么其就会安装在当前的子目录下，我们必须在这个特定的目录下才能使用这个命令。

　　注意：输入这条指令的前提时要联网，因为只有联网才能下载并安装这个grunt-cli。

　　然后我们输入grunt,检测是否安装成功，输入如下，则表示安装成功：

　　最后我们来检测版本看是否成功，如下所示：

　　

　　这就表明，我们已经安装成功啦！

第三部分：创建一个简单的网站

　　因为我们使用grunt的原因就是它可以用在项目中，帮助我们更好的开发网站，如下所示：

　　首先我在D盘建立一个grunt_test文件夹，并在其中建立下面的文件：

　　　 其中package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录中的普通json文件，然后我在package.json中写一些基本信息，如下所示：

{
    "name":"grunt_test",
    "version":"1.0.0",
    "devDependencies":{

    }
}

　　　　这里写了网站的名称和版本号以及devDependencies，什么使devDependencies呢？按照名称就可以得知它是项目依赖的插件，即开发依赖项，即我们所作的网站是依赖于什么工具开发的，现在是空对象，说明我们现在谁都没有依赖，后面会慢慢填充它。

第四部分：安装grunt

　　grunt是一个构建工具，它本身没有什么作用，但是它可以把有作用的一个个插件整合起来，形成一个整体效应，这时它就有很大的作用了。

　　值得注意的是，安装grunt-cli即grunt命令行的时候我们是全局安装，但是安装grunt就需要进入具体的目录下了。

　　我们进入cmd，然后进入grunt_test目录下输入下面的命令：

npm install grunt  --save-dev

　　npm install grunt很好理解，就是安装grunt，但是--save-dev是什么意思呢？  --save是指将保存配置信息到package.json下， -dev是指将该信息保存到package.json中的devDependencies节点，如果我们没有使用-dev，将会保存到dependencies节点。

　　回车之后，会出现一些安装的信息，还有WARN提示，不要理他就行。我们既然依赖了grunt那么package.json下的devDependencies就应该出现依赖项了，我们现在打开package.json就会发现多了一条信息，如下所示：　　

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

　　即我们依赖的是grunt的1.0.1版本。然后进入grunt_test下面，我们看见多了一个node_modules文件夹(modules是模块的意思)，里面还有其他许多文件。

　那么在1.0.1之前的^是什么意思呢？ 它表示如果有最新的版本，就在主版本号不变的情况下更新这个版本，比如grunt发布了1.5.1，就会自动更新到1.5.1，但是如果grunt到了2.0.1，这是主版本号已经发生了变化，所以就不能自动更新了。

　如果1.0.1之前的不是^而是~,则表示可以在次版本号不变的情况下更新这个版本，比如1.0.8出来了，就会自动更新，若1.3.2出来了，次版本号发生了改变，那么这时就不可自动更新了。

这时我们再grunt_test下运行grunt，就会收到一条warn提示，它说明这时grunt已经起作用了，如下所示：

       

　　于是grunt已经在这个目录下成功安装。但是Tast "default" not found.是什么意思呢？ 接下来的步骤就会解决这些问题。

　　

第五部分：配置Gruntfile.js

　　打开我们之前创建的Gruntfile.js，然后再其中输入下面基本代码：

// 包装函数
module.exports = function(grunt){
// 任务配置，所有插件的配置信息
grunt.initConfig({

//获取 package.json 的信息
pkg: grunt.file.readJSON('package.json')

});

//告诉grunt当我们在终端输入grunt是需要做些什么（注意先后顺序）
grunt.registerTask('default',[]);

};

　　现在已经配置好了，当我们再次输入grunt时你就会发现没有任何问题了，如下所示：

　　

　　其中pkg: grunt.file.readJSON('package.json')是这个Gruntfile.js用来获取package.json的内容，所以不要以为package.json是没有用的，具体有什么用处，后面会讲到。

第六部分：Grunt插件

　　在http://www.gruntjs.net/plugins中有许多插件，它们来自npm模块数据库。其中带有星号的且以contrib-作为前缀的插件是被官方维护的，没有这两个标志的插件则是第三方的。其中我们还可以看到30内的下载量。因为目前共有6010个插件，我们不可能全用，下载量排名靠前的一定是好用的，我们可以适当选择。如图所示：

其中它们的主要功能如下：

• contrib-watch ------实时监控文件的变化（增加、改变或被删除），一旦变化则执行预定义的任务
• contrib-clean  ------清空文件、文件夹
• contrib-copy   ------复制文件、文件夹
• contrib-uglify  ------使用UglifyJS压缩JavaScript文件
• contrib-jshint  ------JavaScript的语法错误检查
• contrib-concat ------ 合并多个文件的代码到一个文件中
• contrib-cssmin------ 压缩css代码
• karma            ------ 前端自动化测试工具

下面我将主要介绍其中的几个。　　

第七部分：contrib-uglify压缩JavaScript代码

　　我们知道很多js代码都有*.min.js版本，因为压缩代码可以使其更轻量，使的网站的性能更好，那么怎么使用contrib-uglify压缩JavaScript代码呢？

　　我们可以直接点进去，到contrib-uglify的页面，这里介绍的非常详细。

　　第一步：在cmd中输入下面指令（注意：同安装grunt一样，这里没有全局安装，所以应当先进入grunt_test在执行下面的指令）： 　　　　

npm install grunt-contrib-uglify --save-dev

　　同样，--save-dev将会保存配置信息到 package.json下面的devDependencies中。

　　这时，我们可以看到package.json中又发生了新的变化，并且在grunt_test中又多了文件夹，如下所示：

{
  "name": "grunt_test",
  "version": "1.0.0",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-uglify": "^2.0.0"
  }
}

　　即在devDependencies中又添加了contrib-uglify的2.0.0版本。

　　

　　第二步：虽然，现在下载到了压缩JavaScript代码的插件，但是我们现在链js代码都没有啊，怎么测试呢，所以还是现在src下建立一个js文件吧，如下所示：

function add(num1,num2){
    return num1+num2;
};
console.log(add(,));

　　这个文件建好了，但是谁知道压缩什么，怎么压缩，压缩到哪里呢？ 这些都是需要配置的，所以我们得在Gruntfile.js中进行配置。

　　　　1.在grunt.initConfig方法中配置 uglify 的配置参数。如下所示：

    // 任务配置，所有插件的配置信息
    grunt.initConfig({

    //获取 package.json 的信息
    pkg: grunt.file.readJSON('package.json'),

    //uglify插件的配置信息
    uglify: {
        options:{
            stripBanners:true,
            baner:'/*!<%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd")%>*/\n'
        },
        build:{
            src:'src/test.js',
            dest:'bulid/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
        }
    }
    });

　　　　其中我们再grunt.initConfig方法中添加了uglify的配置，其中的options是可选的，它表示允许生成的压缩文件带banner，通过获取pkg的name和version在生成的压缩文件中做出说明，即options是说如何压缩。而build则是必选的，它告诉我们应当压缩谁，压缩到哪里，当然这只是最基本的应用，还有其他很多方式 可以选择。

　　　　2.　在grunt.initConfig方法之后添加一个grunt.loadNpmTasks方法来加载这个插件，只有加载了才能使用啊。如下所示：

    //告诉grunt我们将加载uglify插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

　　　　3.  在grunt命令执行时，要不要立刻去执行ugligy插件呢? 如果要，就像下面这样写上，如果不要，就不用写；建议写上。

    //告诉grunt当我们在终端输入grunt是需要做些什么（注意先后顺序）
    grunt.registerTask('default',['uglify']);

　　　　至此Gruntfile.js文件就配置好了。

　　第三步：在控制台中执行grunt命令，如下所示。

　　

　　显示，一个文件已经被创建，如果不出意外，这个文件就是我们的压缩文件了。去build中看看，结果如下：

　　

　　并且也出现了banner。

　　最终Gruntfile.js文件如下：

// 包装函数
module.exports = function(grunt) {
    // 任务配置，所有插件的配置信息
    grunt.initConfig({

    //获取 package.json 的信息
    pkg: grunt.file.readJSON('package.json'),

    //uglify插件的配置信息
    uglify: {
        options:{
            stripBanners:true,
            banner:'/*!<%=pkg.name%>-<%=pkg.version%>.js <%= grunt.template.today("yyyy-mm-dd")%>*/\n'
        },
        build:{
            src:'src/test.js',
            dest:'build/<%=pkg.name%>-<%=pkg.version%>.js.min.js'
        }
    }

    });

    //告诉grunt我们将加载uglify插件
    grunt.loadNpmTasks('grunt-contrib-uglify');

    //告诉grunt当我们在终端输入grunt是需要做些什么（注意先后顺序）
    grunt.registerTask('default',['uglify']);

};

第八部分：使用contrib-jshint来检查JavaScript语法错误

　　这一点是尤其吸引我的，因为之前我一直苦恼于错误的JavaScript代码难以排错，但是jshint却很好地解决了这个问题，下面我们开始吧。

　　第一步：输入下面的指令：

npm install grunt-contrib-jshint --save-dev

　　安装之后，同样会有warn，可以不用理会。且此时在package.json中又多了"grunt-contrib-jshint": "^1.1.0"这一行代码。

　　

　　第二步：配置Gruntfile.js文件。

　　　　1.在grunt.initConfig方法中配置jshint,如下所示：

    //jshint插件的配置信息
    jshint:{
        build:['Gruntfile.js','src/*.js'],
        options:{
            jshint:'.jshintrc'
        }
    }

　　　　其中build是告诉grunt检查Gruntfile.js和src下的所有js文件。同样options是告诉grunt怎么去检查，其中包含了检查规则的.jshintrc文件（遵守严格的json格式）放在根目录下，内容可以是下面这种（当然网上还有很多，大家可以自行搜寻）：

{
  "boss":      true,
  "node":      true,
  "eqeqeq":    true,
  "strict":    true,
  "newcap":    false,
  "undef":     true,
  "unused":    true,
  "onecase":   true,
  "lastsemic": true
}

　　这里的一些配置是说是否采用严格模式等等，这部分应当根据我们的需求而定。

　　　　2.加载插件，这个和uglify是相同的，值得注意的是，加载插件无需关注先后顺序。如下所示：

    //告诉grunt我们将加载uglify插件
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

　　　　　3. 配置grunt命令启动时，要执行的任务，这里是有先后顺序的。显然先检查错误，后合并文件更好，如下所示：

　　　　

    //告诉grunt当我们在终端输入grunt是需要做些什么（注意先后顺序）
    grunt.registerTask('default',['jshint','uglify']);

　　　　第三步：配置好了，为了检查语法错误，所以我们需要把test.js加一些语法错误，如下所示：

function add(num1,num2){
    return num1+num2
}
console.log(add(,));

　　问题是在return语句后没写分号,如下所示：

　　我们可以看到，它确实检测出来了分号没有写，后面我强行压缩js文件，但是得到了一个warning。

　　

　　

第九部分：使用contrib-watch实现自动化

　　

　　

http://developer.51cto.com/art/201506/479127.htm

http://www.cnblogs.com/wangfupeng1988/p/4561993.html

　　　　　　http://www.imooc.com/video/5151

　　　　　　　　http://www.imooc.com/video/9882