首页 > Web开发 > 详细

js构建工具

时间:2016-06-19 02:06:20      阅读:306      评论:0      收藏:0      [点我收藏+]

为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,自动化工具可以减轻你的劳动,简化你的工作。当你在?Gruntfile?文件正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

?

?

不错的链接

NPM 使用介绍

http://www.runoob.com/nodejs/nodejs-npm.html

?

------版本号

使用NPM下载和发布代码时都会接触到版本号。

NPM使用语义版本号来管理代码,这里简单介绍一下。

语义版本号分为X.Y.Z三位,分别代表主版本号、次版本号和补丁版本号。当代码变更时,版本号按以下原则更新。

  • 如果只是修复bug,需要更新Z位。
  • 如果是新增了功能,但是向下兼容,需要更新Y位。
  • 如果有大变动,向下不兼容,需要更新X位。

版本号有了这个保证后,在申明第三方包依赖时,除了可依赖于一个固定版本号外,还可依赖于某个范围的版本号。例如"argv": "0.0.x"表示依赖于0.0.x系列的最新版argv。

NPM支持的所有版本号范围指定方式可以查看官方文档

npm是?Node.js?的包管理器

?

?

?

http://www.gruntjs.net/getting-started

安装cli

npm install -g grunt-cli

?

上述命令执行完后,grunt?命令就被加入到你的系统路径中了,以后就可以在任何目录下执行此命令了。

注意,安装grunt-cli并不等于安装了 Grunt!Grunt CLI的任务很简单:调用与Gruntfile在同一目录中 Grunt。这样带来的好处是,允许你在同一个系统上同时安装多个版本的 Grunt。

这样就能让多个版本的 Grunt 同时安装在同一台机器上。

cli是如何工作的

每次运行grunt?时,他就利用node提供的require()系统查找本地安装的 Grunt。正是由于这一机制,你可以在项目的任意子目录中运行grunt?。

?

grunt项目练手

  1. 将命令行的当前目录转到项目的根目录下。
  2. 执行npm install命令安装项目依赖的库。
  3. 执行?grunt?命令。

?

?

?

grunt项目出现在

package.json,就可以管理好模块的依赖关系。

package.json应当放置于项目的根目录中,与Gruntfile在同一目录中,并且应该与项目的源代码一起被提交。在上述目录(package.json所在目录)中运行npm install将依据package.json文件中所列出的每个依赖来自动安装适当版本的依赖。

?

Gruntfile由以下几部分构成:

  • "wrapper" 函数
  • 项目与任务配置
  • 加载grunt插件和任务
  • 自定义任务

http://study.163.com/course/introduction.htm?courseId=691008#/courseDetail

?

?

Gruntfile?

这个是

"wrapper" 函数

每一份?Gruntfile?(和grunt插件)都遵循同样的格式,你所书写的Grunt代码必须放在此函数内:

module.exports = function(grunt) { // Do grunt-related things in here };

?

?

?http://www.hulufei.com/post/grunt-introduction

?

我想先花点时间回忆一下作为一个前端需要做的工作(Loading...)

  • JS合并
  • JS压缩
  • CSS压缩
  • CSS Sprite
  • 图片优化
  • 测试
  • 静态资源缓存(版本更新)
  • ...

对应的,一个全副武装的前端可能会是这样的:

  • JSHint
  • CSSLint
  • Jade
  • CoffeeScript
  • RequireJS/SeaJS
  • Compass/Stylus/Less
  • QUnit/Mocha/Jasmine
  • ...

就是这么苦逼的设定,但其实也正是有了这些天才的工具和解决方案才让我们的工作变得更美好,WTF

随身装备这么多武器,拔刀的姿势很重要,手忙脚乱焦头烂额的狼狈样肯定是不行的。如果每个工具(任务)对应一个招数的话,Grunt就是用来组合各种华丽连续技的辅助装备。这比喻略显白烂,高端大气国际化的说法叫“工作流”(Workflow)。所以开始进入正题:?Grunt锻造指南,参见!

?

js构建工具

原文:http://yuzhouxiner.iteye.com/blog/2305696

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!