文档章节

前端开发自动化工具Grunt和bower

D
 DoIt
发布于 2016/06/28 15:30
字数 1765
阅读 74
收藏 1

精选30+云产品,助力企业轻松上云!>>>

自动化工作流

我们的产品基于复杂的流程,有很多步骤需要执行,比如从最后一次部署清理临时文件。
校验代码,连接和最小化javascript文件,拷贝图片,配置文件等资源文件,运行测试等等其它工作。

根据环境的不同,工作流的内容也可能有所不同。
使用Grunt自动工作流
使用Bower管理包

Grunt是一个JavaScript任务运行器,它自动运行重复的繁杂的任务。
它也可以将希望被执行的任务打包成任何序列,来创建工组流。

基于插件工作,它有一个庞大的生态系统拥有成千上万的可下载的插件选择。
我们也可以创建自己的插件并共享到社区。

npm install -g grunt-cli grunt


Gruntfile.js 文件是用JavaScript定义的每个任务,插件和工作流的配置。

module.exports = function(grunt){    
    //1-- 配置每个任务
    grunt.initConfig({    
    });
    
    //2-- 加载插件
    grunt.loadNpmTasks('plugin name');
    
    //3-- 通过对任务分组创建一个工作流
    grunt.registerTask('taskName',['task1','task2','task3']);
}
可以通过 npm init 生成下面的依赖管理文件:
package.json 

创建一个分发包:
在向生产环境部署之前,我需要创建一个优化的分发包:
性能:通过连接步骤,我们可以大大减少浏览器请求次数。
应用程序所有的脚本都可以被连接成一个文件。
接着是缩小步骤,移除文件中所有的空白,行间隔,评论,替换本地变量和函数使它们
比原来定义更短一些。这样通过减少需要传递的字节数来提高性能。
HTML和CSS文件也需要被缩小,图片可以通过特定的处理器优化。
Grunt有许多处理以上任务的插件可以下载使用。


安全:通过移除空格,行段,评论和替换本地变量名,javascript文件变的更加难以理解。
我们应该使用数组来定义依赖机制,将每个依赖定义成字符串。

质量:这里有两个步骤来提高分发内容的质量。第一个校验步骤,比如JSLint或者JSHint。

1、清理安装
   首先清理我们上一次安装的文件,它可以通过插件grunt-contrib-clean来完成。
   注意哪些需要配置哪些目录,防止一些文件被错删。
   安装该插件: npm install grunt-contrib-clean --save-dev
   
   安装之后我们需要配置它:
   Gruntfile.js
   
   module.exports = function(grunt){
    grunt.initConfig({
        clean:{
            dist:["dist/"]
        }
    });
    
    grunt.loadNpmTasks("grunt-contrib-clean");
    grunt.registerTask("dist",["clean"]);
   }
   
   这里我们创建了分发文件包位于dist/目录下。
   
 2、校验步骤:校验我们使用插件 grunt-contrib-jsint
    通过如下命令安装它:
    npm install grunt-contib-jsint --save-dev
    
    然后再gruntfile.js文件中对其进行配置
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                all:['Gruntfile.js','js/**/*.js','test/**/*.js']
            }
        });
    
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        
        grunt.registerTask("dist",["clean","jshint"]);
    }
    
3、连接阶段:通过插件grunt-contrib-concat ,连接配置设置的原文件成一个目标文件。
该插件安装命令:
    npm install grunt-contrib-concat --save-dev
    
    接下来在gruntfile.js文件中配置该插件:
    我们通过concat对象的src属性设置源文件目录,通过dest属性设置目标文件目录。
    
    module.exports = function(grunt0{
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["src/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            }
        });
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat"]);
}
   
 4、Minifying 步骤:
    缩小步骤,包括去掉空格,换行符,评论,替换变量和函数名等操作。
    这些都可以使用插件 grunt-contrib-uglify 完成
    npm install grunt-contrib-uglify --save-dev
    
    配置该插件,跟grunt-contrib-concat类似,需要定义uglify对象的src和dest属性。
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify"]);
    }

5、拷贝步骤,有许多文件比如images,fonts等其它需要无损的拷贝的文件。
    可以使用grunt-contrib-copy插件来定义完成,它能够拷贝文件夹和文件。
    npm install grunt-contib-copy --save-dev
    
    配置信息:
    Gruntfile.js
    
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"]
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        
        grunt.registerTask("dist", ["clean", "jshint", "concat","uglify", "copy"]);
    }
    
6、测试步骤:
   Grunt调用grunt-karma插件通过读取karma.conf.js 文件,并运行测试。
   插件安装:npm install grunt-karma --save-dev
   在Gruntfile.js文件中我们只需要配置Karam的配置文件位置即可。
   
   module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karma:{
                dist:{
                    configFile:"karam.conf.js"
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.registerTask("dist", ["clean", "jshint", "concat",
        "uglify", "copy", "karma"]);
    }

7、运行阶段:    
    作为最后一个可选步骤,是在分发包被编译后运行应用程序。
    Grunt有一个服务器插件 grunt-connect
    安装它: npm install grunt-contrib-connect --save-dev
    
    在Gruntfile.js文件中对服务插件进行配置:
    module.exports = function(grunt){
        grunt.initConfig({
            clean:{
                dist:["dist/"]
            },
            jshint:{
                dist:['Gruntfile.js','js/**/*.js','test/**/*.js']
            },
            concat:{
                dist:{
                    src:["js/**/*.js"],
                    dest:"dist/js/scripts.js"
                }
            },
            uglify:{
                dist:{
                    src:["dist/js/scripts.js"],
                    dest:"dist/js/scripts.min.js"
                }
            },
            copy:{
                dist:{
                    src:["index.html","lib/*","partials/*","css/*"],
                    dest:"dist/"
                }
            },
            karam:{
                dist:{
                    configFile:"karam.conf.js"
                }
            },
            connect:{
                dist:{
                    options:{
                        port:9001,
                        base:'dist/'
                    }
                }
            }
        });
        
        grunt.loadNpmTasks("grunt-contrib-clean");
        grunt.loadNpmTasks("grunt-contrib-jshint");
        grunt.loadNpmTasks("grunt-contrib-concat");
        grunt.loadNpmTasks("grunt-contrib-uglify");
        grunt.loadNpmTasks("grunt-contrib-copy");
        grunt.loadNpmTasks("grunt-karma");
        grunt.loadNpmTasks("grunt-contrib-connect");
        
        grunt.registerTask("dist",["clean","jshint","concat","uglify","copy","karma","connect:dist:keepalive"]);
    }
    
    注意在配置 connect运行时需要使用keepalive否则服务只会在Grunt运行时运行。
    
    所有插件安装完成后的package.json 文件内容:
    {
        "name": "parking",
        "version": "0.1.0",
        "devDependencies": {
            "grunt": "~0.4.5",
            "grunt-contrib-clean": "~0.5.0",
            "grunt-contrib-jshint": "~0.10.0",
            "grunt-contrib-concat": "~0.4.0",
            "grunt-contrib-uglify": "~0.5.0",
            "grunt-contrib-copy": "~0.5.0",
            "grunt-karma": "~0.8.3",
            "karma": "~0.12.16",
            "grunt-contrib-connect": "~0.8.0"
        }
    }
    
    我们还可以直接创建package.json文件,然后运行 npm install 来一次性完成安装。
    
    
执行工作流:

grunt <name of the task or workflow>

比如执行一个清理任务:

grunt clean

我们可以为每个任务定义多个配置文件,比如connect 服务
connect: {
    production: {
        options: {
            port: 9001,
            base: 'dist/'
        }
    },
    development: {
        options: {
            port: 9002,
            base: '/'
        }
    }
}

我们还可以生成两个连接文件,一个是源代码连接文件,一个是类库连接文件。
concat: {
    js: {
        src: ["js/**/*.js"],
        dest: "dist/js/scripts.js"
    },
    lib: {
        src: ["lib/**/*.js"],
        dest: "dist/lib/lib.js"
    }
}

运行命令: grunt concat

或者分别执行:
grunt concat:js
grunt concat:lib


使用Bower进行包管理
Bpwer是Twitter推出的包管理器,聚焦于前端应用。

安装 bower
 
npm install -g bower

查找包
bower search <package name>

安装包
bower install <package name>

bower install angular --save

该angular包惠被从Git库中下载并存放到bower_components/ 目录下。
--save 指令用于更新bower.json 文件。

我们可以通过
bower list 
查看下载的包列表

更新包
bower update <package name>

卸载包
bower uninstall angularjs-file-upload --save

使用包:
<script src="bower_components/angular/angular.min.js"></script>


缓存
移除的包会在Bower的缓存中有残留,位于用户的 home 文件夹的 cache/bower 目录下,我们可以通过如下指令
查看
bower cache list

Bower还可以离线安装包,只需要执行如下命令
bower install angular --offline

清理缓存包并删除所有下载包
bower cache clean

D
粉丝 3
博文 105
码字总数 248750
作品 0
海淀
高级程序员
私信 提问
如何构建自动化的前端开发流程

我们先来看下前端开发可能存在的问题: 我们有许多的第三方库的依赖需要管理; 我们有独立的前端测试需要自动运行; 我们还有很多代码需要在发布时进行打包压缩; ⋯⋯ 所以构建一个自动化的...

-鹏
2015/11/13
177
0
前端工程化之路(一)基于Yeoman:Yo+grunt/gulp+bower 搭建前端工程

转载请加说明:http://my.oschina.net/panpcui/blog/671921 ,谢谢 引言 现今,越来越多的前端集成开发工具涌现,个人觉得特别有必要让前端开发更规范、更系统、更高效。规范:让前端开发的编...

小小实习生
2016/05/09
1K
0
创建 Web 前端开发环境(node和npm以及git)

Web 前端开发涉及多种工具,这里将常用工具的安装和配置进行说明,提供了详细的说明,为后继的开发创建一个坚实的基础。 本文介绍的工具有:NodeJS, NPM, Bower, Git 和 Grunt。 1. 安装 No...

杨杨0708
2016/06/13
0
0
Grunt+Bower+Yarn管理前端资源

Grunt 基于JavaScript的自动化构建工具,可以将重复的任务,例如压缩(minification),编译,单元测试,linting等自动化。 Bower Web前端开发的包管理工具,解决前端框架间的依赖关系,方便...

osc_28q3csny
2018/08/24
4
0
用Laravel+Grunt+Bower管理你的应用

如今开源盛行,从后端的各个类库,到如今前端的jQuery插件,前端框架等,越来越多优秀的组件可以被我们选择应用在现有的项目中。随着开源组件的更新迭代,它们互相之间的依赖也越来越复杂。旧...

杨太化
2015/05/04
13
0

没有更多内容

加载失败,请刷新页面

加载更多

Java知识点--卫语句

在《阿里巴巴Java开发手册》中强制规定:超过 3 层的 if-else 的逻辑判断代码可以使用卫语句、策略模式、状态模式等来实现,其中卫语句即代码逻辑先考虑失败、异常、中断、退出等直接返回的情...

HLee
55分钟前
13
0
实施与扩展:何时使用? 有什么不同? - Implements vs extends: When to use? What's the difference?

问题: 请用一种易于理解的语言或一些文章的链接进行解释。 解决方案: 参考一: https://stackoom.com/question/jTkh/实施与扩展-何时使用-有什么不同 参考二: https://oldbug.net/q/jTkh/...

技术盛宴
56分钟前
28
0
剑指offer之队列中的最大值(C++/Java双重实现)

1.题目描述 请定义一个队列并实现函数 max_value 得到队列里的最大值,要求函数max_value、push_back 和 pop_front 的均摊时间复杂度都是O(1)。 若队列为空,pop_front 和 max_value 需要返回...

osc_jvzgahav
58分钟前
12
0
JAVA-过滤器和拦截器1

1、过滤器 (Filter) 过滤器的配置比较简单,直接实现 Filter 接口即可,也可以通过 @WebFilter 注解实现对特定 URL 拦截,看到 Filter 接口中定义了三个方法。 init() :该方法在容器启动初始...

osc_hinb5m98
59分钟前
21
0
模拟红包算法(基于BigDecimal、DecimalFormat、Random类)

基于BigDecimal、DecimalFormat、Random实现模拟红包算法 RedPacket 类 import java.math.BigDecimal;import java.text.DecimalFormat;import java.util.ArrayList;import java.util.Rand......

osc_ml6lx2h4
今天
12
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部