前端自动化

[待]

为什么选择gulp

  • 易于使用,通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理。
  • 构建快速,利用 Node.js 流的威力,你可以快速构建项目并减少频繁的 IO 操作。
  • 插件高质,Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
  • 易于学习,通过最少的 API,掌握 Gulp 毫不费力,构建工作尽在掌握:如同一系列流管道。

如何开始

1.创建工作目录

1
mkdir web-app

2.初始化项目
在命令行输入 npm init,根据提示创建项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
➜ web-app npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (web-app) web-app
version: (1.0.0) 1.0.0
description: gulp工作流模板
entry point: (index.js)
test command:
git repository:
keywords: gulp,工作流,前端自动化
author: lihao
license: (ISC)
About to write to /Users/lixiaohao/Desktop/web-app/package.json:
{
"name": "web-app",
"version": "1.0.0",
"description": "gulp工作流模板",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"gulp",
"工作流",
"前端自动化"
],
"author": "lihao",
"license": "ISC"
}
Is this ok? (yes) yes

3.全局安装gulp
将gulp安装到全局环境,可以在shell中使用gulp命令

1
npm install -g gulp

3.本地安装gulp

1
npm install gulp --save-dev

4.创建gulp配置文件gulpfile.js,并设置一个任务

1
2
3
4
5
var gulp = require('gulp'); // 引入gulp
gulp.task('default',function(){
console.log('gulp默认任务');
});


至此gulp已安装完成

如何定制任务

上一节中gulp已经能正常执行任务,但是并没有对我们的工作效率有任何提升。下面详细介绍gulp的自定义任务。

1.首先在我们的工作目录下创建几个子目录存放我们的代码。

1
2
3
4
5
6
7
8
9
|__app
| |___img
| |___js
| |___sass
|__build
| |___css
| |___img
| |___js
|__gulpfile.js