`

js构建工具

 
阅读更多

为何要用构建工具?

一句话:自动化。对于需要反复重复的任务,例如压缩(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锻造指南,参见!

 

0
3
分享到:
评论

相关推荐

    JavaScript构建工具 Grunt.zip

    JavaScript构建工具Grunt是开发者们在进行前端项目开发时常用的一款自动化工具,它极大地提高了工作效率,简化了诸如编译、测试、压缩、合并等常见任务的执行过程。Grunt是基于Node.js平台的,利用npm(Node包管理器...

    js压缩工具.zip

    - Gulp:一个基于Node.js的自动化构建工具,可以配合插件实现JS压缩。 - Grunt:另一个流行的Node.js构建工具,也有许多用于压缩JS的插件。 - Webpack:现代的模块打包工具,不仅可以压缩JS,还能处理其他类型的...

    JavaScript_用于web的零配置构建工具.zip

    总的来说,"JavaScript_用于web的零配置构建工具.zip"包含的是Parcel这个强大的JavaScript构建工具,它为Web开发者提供了高效、易用的开发环境,使得他们能够更加专注于创新和提升应用的质量。无论你是初学者还是...

    actions-js-build:用于运行Javascript构建工具和提交文件更改的GitHub Actions

    2. **gulp** - `gulp` 是一个流行的JavaScript构建工具,它允许开发者通过定义任务流来自动化构建过程。 3. **npm** - `npm` (Node Package Manager) 是JavaScript生态中的包管理器,也是Node.js项目中常见的构建...

    js开发必备工具

    3. **构建工具**: Gulp、Grunt和Webpack是常见的JavaScript构建工具,它们负责自动化任务,如编译Sass/LESS到CSS,合并和压缩JavaScript文件,处理图片,以及执行单元测试等。Webpack以其强大的模块打包能力而备受...

    前端构建尝试1-构建工具源代码

    `Gulp` 是一个基于流的自动化构建工具,它的特点是使用简洁易懂的配置文件(`gulpfile.js`)来定义任务。开发者可以通过编写`Gulp`任务来实现诸如文件转换、合并、压缩、自动刷新等功能。`Gulp`使用插件系统,你可以...

    用自动化构建工具增强你的工作流程!基于流stream的自动化构建工具Gulp+Grunt项目构建

    自动化构建工具Grunt_合并js任务.avi ├─04.自动化构建工具Grunt_压缩js任务.avi ├─05.自动化构建工具Grunt_默认任务,任务高效说明.avi ├─06.自动化构建工具Grunt_任务执行同步说明.avi ├─07.自动化构建工具...

    基于Node.js的JavaScript项目构建工具gulp的使用教程

    在当今前端开发的自动化构建领域,Node.js催生了诸多工具来简化开发流程,而gulp就是其中一个流行的JavaScript项目构建工具。与grunt等构建工具相比,gulp更注重于代码质量,拥有易学易用和高效处理的特点。本文将...

    jsake:[WIP] 又一个 javascript 构建工具

    另一个 javascript 构建工具 YAJSBT 因为我需要一个借口来写一些 javascript。 如何构建 设置 npm install 使用npm test 着地奔跑 全局安装 npm install -g jsake 得到一些帮助 jsake --help # -h 像这样注册...

    JavaScript开发工具 共享

    4. **构建工具**:如Gulp、Grunt和Webpack,它们用于自动化构建流程,如编译Sass或Less到CSS,压缩JavaScript和CSS,合并文件,处理图片等。Webpack尤其强大,它将应用程序视为由模块构成,每个模块都可以被独立打包...

    鬼鬼JS调试工具7.5.rar

    《鬼鬼JS调试工具7.5:网页JavaScript调试与解密的得力助手》 鬼鬼JS调试工具7.5是一款专为JavaScript开发者设计的强大调试利器,尤其在处理复杂的网页应用时,它能帮助开发者深入理解并优化JavaScript代码。这款...

    JavaScript开发更易上手的前端构建工具

    更容易上手的前端构建工具。 基于 webpack 但提供了更友好的配置项,内置的预配置能满足多数项目的需求;全局安装依赖免去开发者每个项目都要重复安装一堆开发依赖的烦恼;插件扩展机制能方便的扩展预配置以及依赖,...

    digo是一个轻量实用的流程化自动构建工具

    在现代JavaScript开发中,构建工具扮演着至关重要的角色,它们能够自动化处理项目的各种预处理任务,提高开发效率并优化代码。"digo"就是这样一款轻量且实用的流程化自动构建工具,它专为JavaScript开发者设计,提供...

    工程级前端构建工具

    工程级前端构建工具在现代Web开发中扮演着至关重要的角色,它们通过自动化流程极大地提高了开发效率,确保代码质量,使得大型项目的管理变得有序且高效。本文将深入探讨这些工具的核心功能、常用工具以及如何在实际...

    fedao学而思在线前端工程构建工具

    【标签】:“JavaScript开发-构建工具”表明这套构建工具的核心是JavaScript,它主要服务于JavaScript开发者,通过自动化工具帮助开发者解决项目构建中的各种问题,例如代码转换、优化、打包等,使开发者可以专注于...

    Node.js原生插件构建工具___下载.zip

    Node.js原生插件构建工具是开发者用于创建和编译C++扩展模块的重要工具,它使得JavaScript能够调用底层系统资源,提升性能和功能。在Node.js生态系统中,`node-gyp`是一个不可或缺的部分,主要用于管理和构建这些...

    chevrotain, 用于JavaScript的解析器构建工具包.zip

    chevrotain, 用于JavaScript的解析器构建工具包 Chevrotain简介Chevrotain是一个收费非常快速的 和的feature Parser解析器构建工具包,用于的JavaScript 。 它可以用于为各种用例构建 parsers/compi

    Node.js-Brunch-前端web应用程序构建工具

    而Brunch则是建立在Node.js之上的一个前端Web应用程序构建工具,它简化了前端开发流程,特别是对于大型项目来说,Brunch提供了高效、简洁的解决方案。 ### Brunch概述 Brunch的核心特性在于其声明式配置,这使得...

    gulp自动化构建

    总结,gulp作为一款强大的JavaScript构建工具,它的流处理机制和丰富的插件生态使得构建过程更加高效。通过定义任务、使用插件和监听文件变化,我们可以构建出符合项目需求的自动化构建流程,从而提高开发效率,降低...

    gassetic, 在gulp构建工具上,基于Assetic替换.zip

    基于Assetic替换 Gassetic 摘要Gassetic是基于gulp构建工具,它是基于gulp构建工具,以获得更舒适的前端开发和依赖性管理与相比具有优势易于安装使用像 Bower 或者 Npm这样的软件包管理器来实现JS依赖性使用 ...

Global site tag (gtag.js) - Google Analytics