评论-4125&
以现在前端js激增的态势，一个项目下来几十个js文件轻轻松松对于复杂一点的单页应用来说，文件上百简直是家常便饭，那么这个时候我们的js文件应该怎么处理呢？另外，对于css文件，又该如何处理呢？？这些都是我们实际工作中要遇到的问题，比如我们现在框架使用zepto、backbone、underscore我们要如何将他们合成一个libs文件，这都是令人头疼的问题
但是grunt的出现却让这些事情变得优雅起来！简单一键，打包结束，尼玛不是不可能啊！
是一套前端自动化工具，一个基于nodeJs的命令行工具，一般用于：① 压缩文件② 合并文件③ 简单语法检查
对于其他用法，我还不太清楚，我们这里简单介绍下grunt的压缩、合并文件
初学，有误请包涵
1、nodeJs环境
因为grunt是基于nodeJs的，所以首先各位需要安装nodeJS环境，这块我们便不管了/yexiaochai/p/3527418.html
2、安装grunt
有了nodeJs环境后，我们便可以开始搞grunt了，因为我们可能在任何目录下运行打包程序，所以我们需要安装CLI官方推荐在全局安装CLI（grunt的命令行接口）
npm install -g grunt-cli
这条命令将会把grunt命令植入系统路径，这样就能在任意目录运行他，原因是
每次运行grunt时，它都会使用node的require查找本地是否安装grunt，如果找到CLI便加载这个本地grunt库然后应用我们项目中的GruntFile配置，并执行任务PS：这段先不要管，安装完了往下看
实例学习：打包zepto
一些东西说多了都是泪，直接先上实例吧，实例结束后再说其它的首先在D盘新建一个项目（文件夹就好）在里面新增两个文件（不要问为什么，搞进去先）
① package.json
"name": "demo",
"file": "zepto",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
"dependencies": {
"express": "3.x"
② Gruntfile.js
完了我们需要在grunt目录下执行 npm install将相关的文件下载下来：
$ cd grunt
然后我们的目录就会多一点东西：
多了很多东西，先别管事干什么的，我们后面都会用到，这个时候在目录下新建src文件夹，并且搞一个zepto进去
然后在Gruntfile中新增以下代码（先别管，增加再说）
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
banner: '/*! &%= pkg.file %& &%= grunt.template.today("yyyy-mm-dd") %& */\n'
src: 'src/&%=pkg.file %&.js',
dest: 'dest/&%= pkg.file %&.min.js'
// 加载提供"uglify"任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
然后运行 grunt命令后
嗯嗯，多了一个文件，并且是压缩的，不差！！！第一步结束
认识Gruntdile与package.json
不出意外，每一个gurnt都会需要这两个文件，并且很可能就只有这两个文件（复杂的情况有所不同）
package.json
这个文件用来存储npm模块的依赖项（比如我们的打包若是依赖requireJS的插件，这里就需要配置）然后，我们会在里面配置一些不一样的信息，比如我们上面的file，这些数据都会放到package中对于package的灵活配置，我们会在后面提到
这个文件尤其关键，他一般干两件事情：① 读取package信息② 插件加载、注册任务，运行任务（grunt对外的接口全部写在这里面）
Gruntfile一般由四个部分组成① 包装函数这个包装函数没什么东西，意思就是我们所有的代码必须放到这个函数里面
module.exports = function (grunt) {
//你的代码
这个不用知道为什么，直接将代码放入即可
② 项目/任务配置我们在Gruntfile一般第一个用到的就是initConfig方法配置依赖信息
pkg: grunt.file.readJSON('package.json')
这里的 grunt.file.readJSON就会将我们的配置文件读出，并且转换为json对象
然后我们在后面的地方就可以采用pkg.XXX的方式访问其中的数据了值得注意的是这里使用的是underscore模板引擎，所以你在这里可以写很多东西
uglify是一个插件的，我们在package依赖项进行了配置，这个时候我们为系统配置了一个任务uglify（压缩），他会干这几个事情：
① 在src中找到zepto进行压缩（具体名字在package中找到）② 找到dest目录，没有就新建，然后将压缩文件搞进去③ 在上面加几个描述语言
这个任务配置其实就是一个方法接口调用，按照规范来就好，暂时不予关注，内幕后期来这里只是定义了相关参数，但是并未加载实际函数，所以后面马上就有一句：
grunt.loadNpmTasks('grunt-contrib-uglify');
用于加载相关插件
最后注册一个自定义任务（其实也是默认任务），所以我们下面的命令行是等效的：
grunt == grunt uglify
至此，我们就简单解析了一番grunt的整个操作，下面来合并文件的例子
合并文件依赖于grunt-contrib-concat插件，所以我们的package依赖项要新增一项
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
然后再将代码写成这个样子
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
separator: ';'
src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
dest: 'dest/libs.js'
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat']);
运行后，神奇的一幕发生了：
三个文件被压缩成了一个，但是没有压缩，所以，我们这里再加一步操作，将之压缩后再合并
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
separator: ';'
src: ['src/zepto.js', 'src/underscore.js', 'src/backbone.js'],
dest: 'dest/libs.js'
src: 'dest/libs.js',
dest: 'dest/libs.min.js'
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-concat');
// 默认任务
grunt.registerTask('default', ['concat', 'uglify']);
我这里的做法是先合并形成一个libs，然后再将libs压缩成libs.min.js
所以我们这里换个做法，先压缩再合并，其实unglify已经干了这些事情了
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
"my_target": {
"files": {
'dest/libs.min.js': ['src/zepto.js', 'src/underscore.js', 'src/backbone.js']
grunt.loadNpmTasks('grunt-contrib-uglify');
// 默认任务
grunt.registerTask('default', ['uglify']);
所以，我们就暂时不去关注concat了
最后，今天时间不早了，我们最后研究下grunt配合require于是便结束今天的学习吧
合并requireJS管理的文件
有了前面基础后，我们来干一件平时很头疼的事情，便是将require管理的所有js文件给压缩了合并为一个文件首先我们建立一个简单的程序，里面使用了zepto、backbone、underscore（事实上我并未使用什么）
在main.js中新增代码：
require.config({
baseUrl: '',
exports: 'zepto'
exports: '_'
exports: 'Backbone'
'$': 'src/zepto',
'_': 'src/underscore',
'B': 'src/backbone'
requirejs(['B'], function (b) {
这样的话运行会自动加载几个文件，我们现在希望将之合并为一个libs.js该怎么干呢？？？
我们这里使用自定义任务方法来做，因为我们好像没有介绍他
要使用requireJS相关需要插件&
grunt.loadNpmTasks('grunt-contrib-requirejs');
因为我们以后可能存在配置文件存在各个项目文件的情况，所以我们这里将requireJs相关的配置放入gruntCfg.json中
这样我们的package.json就没有什么实际意义了：
"name": "demo",
"version": "0.1.0",
"description": "demo",
"license": "MIT",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.6.3",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.1",
"grunt-contrib-requirejs": "~0.4.1",
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-strip": "~0.2.1"
"dependencies": {
"express": "3.x"
我们这里设置的require相关的grunt配置文件如下（gruntCfg.json）：
"requirejs": {
"options": {
"baseUrl": "",
"paths": {
"$": "src/zepto",
"_": "src/underscore",
"B": "src/backbone",
"Test": "src/Test"
"include": [
"out": "dest/libs.js"
这里我们要打包这些文件搞到dest的libs.js文件中，这个文件照做就行，最后核心代码如下：
module.exports = function (grunt) {
grunt.loadNpmTasks('grunt-contrib-requirejs');
//为了介绍自定义任务搞了一个这个
grunt.registerTask('build', 'require demo', function () {
//任务列表
var tasks = ['requirejs'];
//源码文件
var srcDir = 'src';
//目标文件
var destDir = 'dest';
//设置参数
grunt.config.set('config', {
srcDir: srcDir,
destDir: destDir
//设置requireJs的信息
var taskCfg = grunt.file.readJSON('gruntCfg.json');
var options = taskCfg.requirejs.main.options,
platformCfg = options.web,
includes = platformCfg.include,
paths = options.
var pos = -1;
var requireTask = taskCfg.
options.path =
options.out = platformCfg.
options.include =
//运行任务
grunt.task.run(tasks);
grunt.config.set("requirejs", requireTask);
搞完了运行就好：grunt build
grunt build
最后发现叶小钗三字，我就放心了，安全！！！！！！
1 HTML文件打包
2 样式文件打包
3 移动打包文件
我们的开发版本与使用版本可能不在一个位置哦
4 分支处理
不同分支打包
5 native包与HTML5包
在HTML5嵌入webview的时代，我们当然存在一次打包既要形成网站文件也要形成app文件
6 分频道打包
当然可能存在分频道分分支打包的情况
今日到此为止，待续......
阅读(...) 评论()您所在的位置： &
用grunt搭建自动化的web前端开发环境-完整教程(2)
用grunt搭建自动化的web前端开发环境-完整教程(2)
王福朋的博客
jQuery在使用grunt，bootstrap在使用grunt，百度UEditor在使用grunt，你没有理由不学、不用！
4. 创建一个简单的网站
Grunt是应用于实际项目的，所以我们得有一个简单的测试网站来演示grunt的安装、使用。
首先，我在电脑的D盘下面建了一个&grunt_test&文件夹，里面建了三个空文件夹、两个空文档，名称如下图。（注意 Gruntfile.js 文件的首字母大写！）
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M00/6E/33/wKioL1V2hrSgB-WgAAAZ9UfcVTE360.jpg" />
其他的东西先不要管，先把package.json这个文件写一些东西。记住，既然文件后缀名叫&json&，那么文件中的格式肯定是严格的json格式。什么，不熟悉json？作为一个web前端程序猿，json是必备课。有一个教程《》能让你彻底了解json。
书归正传。Package.json的内容我们写成如下格式：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M02/6E/33/wKioL1V2hrSA3sVrAAAb2LbeoPw426.jpg" />
很简单，我们把这个网站或系统的名称、版本写了一下。但是，不光是写在这里占空的，以后会用到的，具体如何用，我们下文会有介绍，先别着急。
还有，最后一个&devDependencies&是什么意思？字面意思解释是&开发依赖项&，即我们现在这个系统，将会依赖于哪些工具来开发。现在代码一行都没有写，依赖于谁？谁也不依赖！所以，就先写一个空对象。但是下文会慢慢把它填充起来。
另外，其实package.json中你可以增加任何符合json格式的代码，它生来自由，仅仅受json代码格式的限制。
怎么样，看到这里，是不是觉得下文很有悬念，很想看下去呀？那就继续！
5. 安装grunt
主角总是姗姗来迟。《三国演义》在开篇三分一之后才请出来诸葛亮，《水浒传》在第十八回才请出了宋江。而我们本文的主角，也出来的不早。
接下来我们会有一系列插件的安装，他们的安装过程和grunt一样。但是他们的执行都是基于grunt的，因此才能把grunt叫做一个&构建工具&。Grunt没有具体的作用，但是它能把有具体作用的一个一个插件组合起来，形成一个整体效应。
例如，你需要检查js语法错误，然后再去压缩js代码。如果这两步你都去手动操作，会耗费很多成本。Grunt就能让你省去这些手动操作的成本。
书归正传。注意，这里安装grunt不再是全局安装了，需要你在控制台进入到网站或系统的具体目录下。这里我们进入 D:\grunt_test 目录下。然后输入以下命令。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M00/6E/37/wKiom1V2hRChsnKJAAAJHCUNYII171.jpg" />
注意，先不要按回车，先不要执行，先看看下文的描述！
这里需要解释的是，&&save-dev&的意思是，在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项。看到&开发依赖项&这一次，是不是觉得有些眼熟？上文在配置package.json时，其中的&devDependencies&中就会存储开发依赖项。
具体保存为开发依赖项是一个什么效果？动手安装一下就是了。首先，在运行安装grunt的命令之前，package.json中的&devDependencies&对应的是空对象。
现在我们来运行这行命令。你会看到几条warning提示，不用管它。然后接下来就是加载状态，一个旋转的小横线。稍等待一会儿，会提示你安装成功。如下图：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="516" height="364" style="border: 0" alt="" src="/wyfs02/M02/6E/37/wKiom1V2hRDArGEwAACvVSKUnUY892.jpg" />
现在你应该第一时间打开package.json去看看，那里的&devDependencies&有什么变化。我这里的变化如下图，看看你的是不是和我的一样？
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M01/6E/33/wKioL1V2hrTDt8HeAAAjlpvnMjs649.jpg" />
然后你再看看文档目录中的文件或者文件夹有什么变化？我这里多了一个&node_modules&文件夹，其中有一个&grunt&文件夹，再其中有若干文档。这里就是存储grunt源文件的地方。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M00/6E/33/wKioL1V2hrTAwxJgAAAdib6HdpA110.jpg" />
这是见证奇迹的时刻，别着急，奇迹还没完呢。然后你在控制台运行&grunt&命令。如果你得到一个warning提示，那说明grunt已经起作用了。如下图：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M01/6E/37/wKiom1V2hRHDnOGJAAAcU8hxiAk431.jpg" />
经过以上三步，说明grunt已经在这个目录下成功安装。
那么，为何我们在刚才执行grunt时候会有Warning提示呢？根据提示，我们得知的信息是：Task &default& not found ，如何搞定这个问题？&&当然是继续往下看啊。
6. 配置Gruntfile.js
顾名思义，Gruntfile.js 这个文件，肯定是为了grunt做某种配置的。按照grunt的规定，我们首先把Gruntfile.js配置成如下格式。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' width="522" height="264" style="border: 0" alt="" src="/wyfs02/M00/6E/37/wKiom1V2hRHgmV-gAABgDY0dinM634.jpg" />
在以上代码中，我们看到了刚才运行grunt命令，warning提示中的&default&字眼。不妨我们此时再运行一下grunt命令，看看会不会再次出现&warning&、&default&等字眼。
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M02/6E/33/wKioL1V2hrWCBR6PAAAQXbgi0xw437.jpg" />
运行结果告诉我们&Done, without errors&。那就继续往下吧。
另外请注意Gruntfile.js中的一句话：
498)this.width=498;' onmousewheel = 'javascript:return big(this)' style="border:0px" alt="" src="/wyfs02/M01/6E/33/wKioL1V2hrWhsSJHAAAUpBUfQ4U896.jpg" />
这句话是在Gruntfile.js中获取package.json中的内容。在上文配置package.json时我们说 过：package.json中的内容不光是用来占位置的，还可以在其他地方获取。这里不是已经获取了package.json内容了吗？至于获取了如何 使用，下文会有介绍，还是继续往下看吧。
内容导航&第 1 页： &第 2 页： &第 3 页： &第 4 页： &第 5 页： &第 6 页：
关于&&的更多文章
打开网页，映入眼帘的是五彩嫔纷的互联网世界。当你在微博上分享
随着云计算、物联网、大数据、移动互联网的大发展，你应该知道这些。
讲师： 38人学习过讲师： 20人学习过讲师： 47人学习过
一周一周的过的很快，2013年已经进入了倒计时。开发频
在脚本语言领域，Lua是最快、最高效的脚本语言之一，
2014年节假放假安于这周出台，80%的公民对此次的放假
20多年以来，《软件工程：实践者的研究方法》一书是最受学生和行业专业人员欢迎的软件工程指南。它在全面而系统、概括而清晰地介
51CTO旗下网站15017人阅读
Web前端（61）
Q：Grunt为何物？
A：一个专为JavaScript提供的构建工具。
Q：啥是构建工具？
A：在项目部署上线前，通常要将源文件压缩，合并，并拷贝到bch或trunk中。 在将js模块化后，又多了一个分析，提取业务代码中所依赖模块的工作。 解决这一系列繁重工作的自动化工具，称之为构建工具。
Q：grunt是如何工作的？
A：刚刚接触grunt，举个例子可能不太恰当，但应该可以让你先比较准确的认识她。 就好像一个万能工厂（grunt），只负责执行任务（Task），不关心每个任务到底都干了什么。 这些任务比如：
clean:删除临时文件
uglify:压缩
qunit:测试
concat:合并
任务流程可能是这样的：
task:clean
task:uglify
task:qunit
task:concat
前提是你已经安装了nodejs和npm。
你可以在&&下载安装包安装，也可以通过包管理器（比如在 Mac 上用 homebrew，同时推荐在 Mac 上用 homebrew）。
安装grunt CLI
npm install -g grunt-cli
按照官方的说法，grunt-cli只是为了在同一台机器上安装不同的grunt版本，那么咱们先不去管他。
在项目中使用grunt
首先需要往项目里添加两个文件：package.json和Gruntfile.js
package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。{
&name&: &cyjs&,
&version&: &0.1.0&,
&description&: &js for k68.org&,
&homepage&: &http://www.k68.org/&,
&author&: &firebaby&,
&devDependencies&: {
&grunt&: &~0.4.1&,
&grunt-contrib-jshint&: &~0.3.0&,
&grunt-contrib-concat&: &~0.1.1&,
&grunt-contrib-uglify&: &~0.1.2&,
&grunt-contrib-cssmin&: &~0.5.0&,
&grunt-htmlhint&: &~0.9.2&
Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每个任务的细节和执行任务的顺序等。
一、安装grunt
在命令行进入项目所在目录，键入如下命令即可，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。
npm install grunt --save-dev
grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。
更多插件，请访问：
在项目目录下安装插件也可采用如下方式安装：
安装：uglify
npm install grunt-contrib-uglify
安装：cssmin
npm install grunt-contrib-cssmin
插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。
二、新建Gruntfile.js
Gruntfile.js由以下内容组成
1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API
module.exports = function(grunt) {
// Do grunt-related things in here
2、项目和任务配置
3、载入grunt插件和任务
4、定制执行任务
module.exports = function(grunt) {
//配置参数
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
options: {
separator: ';',
stripBanners: true
&js/config.js&,
&js/smeite.js&,
&js/index.js&
dest: &assets/js/default.js&
options: {
'assets/js/default.min.js': 'assets/js/default.js'
options: {
keepSpecialComments: 0
compress: {
'assets/css/default.css': [
&css/global.css&,
&css/pops.css&,
&css/index.css&
//载入concat和uglify插件，分别对于合并和压缩
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
//注册任务
grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);
grunt api文档：
三、命令行执行grunt任务
进入到项目根目录，敲：
就会按Gruntfile配置的文件进行压缩合并。
也可以单独执行，例执行js压缩命令：
grunt uglify
css压缩命令
grunt cssmin
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：580911次
积分：5072
积分：5072
排名：第5311名
原创：85篇
转载：34篇
评论：90条
(3)(6)(4)(2)(1)(1)(3)(1)(1)(2)(3)(3)(3)(5)(1)(2)(1)(2)(5)(5)(4)(1)(5)(7)(1)(3)(1)(3)(2)(4)(2)(3)(5)(6)(1)(5)(11)(2)(1)webStorm与grunt整合_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
webStorm与grunt整合
上传于|0|0|文档简介
&&webStorm与grunt整合文档
阅读已结束，如果下载本文需要使用1下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩3页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢}