前端学习总结（十六）前端工具之bower,glup,less总结

一 Bower——让人省心的前端包管理工具

1.自定义bower管理的文件的目录

比如：我一般就放在public/libs下，这样public里还可以放自己的css，js,images等文件夹，项目结构会很清晰

就在项目目录下新建一个.bowerrc文件：

{
"directory":"public/libs"
}

然后在执行bower install命令就可以了

二 强大的流式构建工具gulp

说到gulp就得先说一下grunt,之所以选择gulp而不是grunt,一是在github上gulp已经有20000+star了，是grunt的两倍，可见业界对于gulp的认可，另一很多面在网上也能查到很多文章介绍glup比grunt更好用，所以我个人建议用glup.

Grunt 的几点不足：

1.插件很难遵守单一责任原则。

因为 Grunt 的 API 设计缺憾，使得许多插件不得不负责一些和其主要任务无关的事情。

这也是 Grunt 一个设计思想：把对文件的操作抽象为一个独立的组件（Files），任何插件都以相同的规则来使用它。遗憾在于，使用它的过程发生在每个插件的独立配置对象里，所以总给人一种“把不该这个插件做的事情丢给它来做”的别扭感觉。

2.用插件做一些本来不需要插件来做的事情。

因为 Grunt 提供了统一的 CLI 入口，子任务由插件定义，由 CLI 命令来调用执行，因此哪怕是很简单的外部命令（比如说运行 karma start）都得有一个插件来负责封装它，然后再变成 Grunt CLI 命令的参数来运行，多此一举。

3.试图用配置文件完成所有事，结果就是混乱不堪。

规模较大，构建／分发／部署流程较为复杂的项目，其 Gruntfile有多庞杂相信有经历的人都有所体会。而 gulp.js 奉行的是“写程序而不是写配置”，它走的是一种 node way。

4.落后的流程控制产生了让人头痛的临时文件／文件夹所导致的性能滞后。

这是 gulp.js 下刀子的重点，也是本标题里“流式构建”所解决的根本问题。流式构建改变了底层的流程控制，大大提高了构建工作的效率和性能，给用户的直观感觉就是：更快。

在 node.js 的世界里，streaming 确实是至关重要的。推荐一份阅读材料：Stream Handbook，读过之后相信心里就有数了。

接下来说说gulp,gulp是基于Nodejs的自动任务运行器，流式构建工具,它的作用：

自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。

在实现上，它借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。

gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。

gulp.js 的五大特点：

1.构建脚本是代码，而不是配置文件；

2.使用标准库（node.js standard library）来编写脚本；

3.插件都很简单，只负责完成一件事－基本上都是 20 行左右的函数；

4.任务都以最大的并发数来执行；

5.输入／输出（I/O）是基于“流式”的。

优点

更快，更流畅，更简单

缺点：

如果不是很了解node.js的流的话，自己开发插件会相对费力一些。

Gulp的安装和使用流程

第一步：安装命令行工具

$ npm install -g gulp

第二步：在你的项目下把 gulp 安装为开发依赖组件（假设你已经创建好了 package.json）

$ cd <YOUR_PROJECT>
$ npm install gulp --save-dev

第三步：在项目的根路径下创建 gulpfile.js，初始内容为：

var gulp = require('gulp');

gulp.task('default', function () {
});

第四步：运行！

gulp.js 的学习曲线还是相当平缓的。接下来，为了能够顺利的编写构建脚本，我们来学习几个核心的 API 函数——别担心，gulp.js 的 API 非常简单，我们只需要了解四个就足以应对绝大多数的脚本编写了。

1.注册任务

gulp.task(name[, deps], fn)

name 是任务名称；deps 是可选的数组，其中列出需要在本任务运行要执行的任务；fn 是任务体，这是 gulp.js 的核心了，需要花时间吃透它。

2.指明源文件路径

gulp.src(globs[, options])

用过 Grunt 的话，globs 一定不会陌生，这里没什么变化；options 是可选的，具体请查看 gulp.js API

3.指明任务处理后的目标输出路径

gulp.dest(path)

4.监视文件的变化并运行相应的任务

gulp.watch(glob[, options], tasks)／gulp.watch(glob[, options, cb])

watch 作为核心 API 出现在 gulp.js 里了，具体用法还是要多看文档，不过接下来我们会演示简单的例子。

范例

我们练习一个最常见的范例，写一个 node.js 程序时所需要的构建脚本。为此我们要做三件事情（括号内列出对应插件的名字，更多插件请到此处寻找）：

语法检查 （gulp-jshint）

合并文件 （gulp-concat）

压缩代码 （gulp-uglify）

文件重命名（gulp-rename）

另外，我们可能还需要文件更名操作，所以 gulp-rename 也会很有用。接着我们需要先在项目下安装这些插件：

$ npm install <PLUGIN_NAME> --save-dev

最后我们完成所有任务的编写，完整的代码如下：

var gulp = require('gulp');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

// 语法检查
gulp.task('jshint', function () {
return gulp.src('src/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
});

// 合并文件之后压缩代码
gulp.task('minify', function (){
return gulp.src('src/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('dist'))
.pipe(uglify())
.pipe(rename('all.min.js'))
.pipe(gulp.dest('dist'));
});

// 监视文件的变化
gulp.task('watch', function () {
gulp.watch('src/*.js', ['jshint', 'minify']);
});

// 注册缺省任务
gulp.task('default', ['jshint', 'minify', 'watch']);

可以看出，基本上所有的任务体都是这么个模式：

gulp.task('任务名称', function () {
return gulp.src('文件')
.pipe(...)
.pipe(...)
// 直到任务的最后一步
.pipe(...);
});

非常容易理解！获取要处理的文件，传递给下一个环节处理，然后把返回的结果继续传递给下一个环节……直到所有环节完成。pipe 就是 stream 模块里负责传递流数据的方法而已，至于最开始的 return 则是把整个任务的 stream 对象返回出去，以便任务和任务可以依次传递执行。

或许写成这样会更直观：

gulp.task('task_name', function () {
var stream = gulp.src('...')
.pipe(...)
.pipe(...)
// 直到任务的最后一步
.pipe(...);
return stream;
});

最后只需要进入项目目录执行gulp命令就可以了。

至此，已经可以使用 gulp.js 完成绝大多数的构建工作了。扩展学习：

花点时间浏览一下 gulp.js 插件库，大致了解下利用已有的插件你都可以做哪些事情。

对于常用的插件，仔细阅读它们自己的文档，以便发挥出它们最大的功效。

抽时间学习 gulp.js API，特别是 gulp.task() 里关于任务体的详细描述，学会如何执行回调函数（callback），如何返回 promise 等等。

尝试编写适合自己工作流程和习惯的任务，如果它工作良好，把它做成插件发布给大家！

三 css预编译语言less

js操作dom瓶颈非常大，而且影响性能。所以能用css解决的问题就不要用js。

而LESS将CSS赋予了动态语言的特性,如变量,继承,运算,函数等,它让css能够方便的做更多事情。

LESS可以在客户端运行,也可以在服务端运行，但我个人建议在服务端运行，这样可以提高页面的性能。

使用

1.在项目中安装less：

npm install less

2.项目中创建一个.less文件，按照less的语法写css,如/public/less/目录下的style.less：

// LESS

@color: #4D926F;

#header {
color: @color;
}
h2 {
color: @color;
}

3.执行lessc命令将less编译成css文件以引用：

$ lessc ./public/less/style.less ./public/css/style.css

最终项目中调用的话建议加上–clean-css生成压缩的css，性能更好(需要先安装less的–clean-css插件,执行过npm install less-plugin-clean-css命令就可以了)：

$ lessc --clean-css ./public/less/style.less ./public/css/style.css

4.less配合gulp自动将less文件编译成css文件并且监控和自动更新：http://www.ydcss.com/archives/34

5.less常用语法