在前端工程化系列[02]-Grunt构建工具的基本使用和前端工程化系列[03]-Grunt构建工具的运转机制这两篇文章中,我们对Grunt以及Grunt插件的使用已经有了初步的认识,并探讨了Grunt的主要组件以及它的运转机制,这篇文章是Grunt使用的进阶教程,主要输出以下内容: ❏  Grunt项目的自定义任务❏  Grunt任务的描述和依赖❏  Grunt多目标任务和选项❏  Grunt项目任务模板配置❏  Grunt自动化构建和监听 3.1 Grunt自定义任务 在使用Grunt的时候,…

在前端工程化系列[02]-Grunt构建工具的基本使用这篇文章中,已经对Grunt做了简单的介绍,此外,我们还知道了该如何来安装Grunt环境,以及使用一些常见的插件了,这篇文章主要介绍Grunt的核心组件和运转机制. Grunt是一套前端自动化构建工具,可以帮助我们简化开发中需要反复处理的任务,甚至可以实现自动构建等功能. Grunt拥有数量庞大的插件,这些插件能够帮助我们处理开发中遇到的绝大多数构建任务,比如代码的预编译.压缩.代码检查.单元测试等.但为什么在终端输入Grunt相关命令,就能…

本文主要介绍前端开发中常用的构建工具Grunt,具体包括Grunt的基本情况.安装.使用和常见插件的安装.配置和使用等内容. 1.1 Grunt简单介绍 Grunt是一套前端自动化构建工具.对于需要反复重复的任务(如压缩.编译.单元测试等),自动化构建工具可以减轻并简化我们的工作.我们只需要在 Gruntfile 文件中正确配置好要处理的任务,任务运行器就会自动帮我们完成大部分工作. Grunt的优点 ❏ Grunt拥有庞大的生态系统,并且一直在增长.❏ Grunt支持我们自己创作插件并发布.…

在前端工程化系列[05] Yeoman脚手架使用入门这边文章中,对Yeoman的使用做了简单的入门介绍,这篇文章我们将接着探讨Yeoman这个脚手架工具内部的核心机制,主要包括以下内容 ❏ Yeoman脚手架工具的价值讨论❏ generator[生成器]的内部结构❏ generator[生成器]的项目模板❏ Yeoman脚手架工具的核心运转机制❏ Yeoman 的主要组装流程 Yeoman这样的脚手架工具解决了什么问题? 所有新事物都不是凭空产生的,它们的出现总有某些内在的驱动力.一项新技术,一…

Grunt到底有什么作用?一般用来干嘛? 很多前端的工作,包括Less编译.javascript压缩.Css压缩等零零碎碎的工作, 都可以让Grunt来做. 实际上在项目开发中,一般是前端代码 与 后端代码 完全分离,才会使用Grunt构建工具. 目前很多构建工具已经相当强大了,说说他的强大功能: 1.javascript文件压缩.合并,合并能减少很多HTTP请求,优化网站性能: 2.自动做CSS Sprite,小图标合并的繁琐工作,你完全可以解脱,你告诉他你的图标的图标位置,对应的图标合并.b…

本文主要介绍前端开发中常用的包管理工具Bower,具体包括Bower的基本情况.安装.使用和常见命令等内容,最后还介绍了依赖树管理的常见方式以及Bower采用的策略并进行了比较. 1.1 关于Bower Bower是一款优秀的包管理器,它由Twitter公司开发,支持以命令行的方式来对包进行搜索.下载.更新和卸载. 模块或组件指独立完整的模块,可以是应用的一部分或者是扩展,依赖可以是jQuery或backbone这样的库,也可以像Bootstrap这样的UI框架或者是UI组件. 包英文(pack…

操作环境:win8 系统,建议使用 git bash (window下的命令行工具) 1,安装node.js 官网下载:https://nodejs.org/  直接点击install ,会根据你的操作系统下载对应的 版本 检测是否安装 node -v 现在我们来运行一个简单的node程序,创建hello.js 文件,复制下面的代码: var http = require("http"); http.createServer(function(request, response) {…

Grunt是javascript的构建工具,对于需要反复重复的任务,例如压缩(minification).编译.单元测试.linting等,自动化工具可以简化工作.Grunt生态系统非常庞大.你可以利用Grunt自动完成任何事,并且花费最少的代价.如果找不到你所需要的插件,那就自己动手创造一个Grunt插件,然后将其发布到npm上.   一.Grunt安装: Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器.Grunt 0.4.x 必须配合Node…

Grunt--Less 摘要: 之前介绍了自动构建工具Grunt,其中有一个模块是"grunt-contrib-less",下面是配置Grunt自动编译less文件. 安装: Grunt是基于node,功能模块化.你可以将grunt-contrib-less配置在package.json中然后npm install就完成安装了,也可以通过下面命令安装 npm install grunt-contrib-less --save-dev 注意: grunt-contrib-less是开发依…

Grunt任务分为两部分,一部分是任务,即Grunt要执行的代码,找到对应功能的插件就成.所以等会要下载grunt-contrib- less包,这个插件便是把less文件编译成能直接使用的css.另一部分是配置,即传给grunt.initConfig方法的对象. 关于如何安装Grunt,创建Gruntfile.js文件本文不再详述,可以参考<用grunt搭建自动化的web前端开发环境>http://developer.51cto.com/art/201506/479127_1.htm 在终端…