guld创建任务清单
[图片上传失败...(image-173c1d-1535602385504)]
- Gulp是一个工具。用于项目构建。
一.Gulp简介：
多个开发者共同开发一个项目，每位开发者负责不同的模块，这就会造成一个完整的项目实际上是由许多的“代码版段”组成的；
使用less、sass等一些预处理程序，降低CSS的维护成本，最终需要将这些预处理程序进行解析；
合并css、javascript，压缩html、css、javascript、images可以加速网页打开速度，提升性能；
这一系列的任务完全靠手动完成几乎是不可能的，借助构建工具可以轻松实现。
所谓构建工具 是指通过简单配置就可以帮我们实现合并、压缩、校验、预处理等一系列任务的软件工具。
常见的构建工具包括：Grunt、Gulp、F.I.S（百度出品）、webpack
Gulp是基于Nodejs开发的一个构建工具，借助gulp插件可以实现不同的构建任务，以其简洁的配置和卓越的性能成为目前主流的构建工具。
[图片上传失败...(image-f0d5a2-1535602385504)]
二.安装：
1.先要全局安装, 让电脑支持gulp
只需要执行一次，如果已经执行过了，就不需要再去执行。Gulp -v 有版本号，代表已经执行过了
$ npm install -g gulp --registry=https://registry.npm.taobao.org
[图片上传失败...(image-7ba04b-1535602385504)]
- 2.切换到项目目录，在本地安装。(让你的项目支持gulp)
$ npm install gulp --registry=https://registry.npm.taobao.org
安装完成会生成一个node_modules文件夹。
3.创建一个package.json文件(记录npm安装那些插件)
当执行npm install时, 会自动把package.json 文件中依赖的插件下载下来
//-f: 安装时跳过缓存直接从远程下载
npm init -f
//作为项目的开发依赖（devDependencies）安装
npm install --save-dev gulp
[图片上传失败...(image-139e84-1535602385504)]
- 4.创建一个文件gulpfile.js
[图片上传失败...(image-5cc4a9-1535602385504)]
三.任务清单
1.创建任务清单。
清单名称是固定死的gulpfile.js2.在gulpfile.js当中定义任务。
gulp是一个对象，此对象可以实现任务清单的定制。
通过一系列的方法来实现
//引入本地安装的gulp
var gulp = require(‘gulp’)
- 3.定义任务
gulp.task(‘任务名称’，function(){
要执行的任务。
});
想要任务执行。在命令行，输入 gulp 任务名称
4.指定任务文件位置 （把less转成css）
gulp.task(‘任务名称’，function(){
//借助gulp.src来指定任务文件位置。
gulp.src(‘./src/style/**/*.less’) //所有的.less文件。
直接使用命令： npm install gulp-less
});
四.原理
- 学习gulp就是学习它的方法和它的插件。
[图片上传失败...(image-9ff5c-1535602385504)]
- gulp是指挥别的插件做任务的运行器。它是一个管理者。
这样做的目的是为了方便扩展。 小霸王 插卡。
学习gulp就是学习gulp的插件。
- 0.全局安装gulp npm install gulp -g (只需要执行一次，如果已经执行过了，就不需要再去执行。Gulp -v 有版本号，代表已经执行过了)
- 1.创建项目目录 （webApp）
- 2.npm init -f 创建一个package.json 记录当前项目当中依赖其它插件
- 3.创建src目录 -> 进入src创建js/style/view文件夹
- 4.把gulpfile拷贝到项目根目录当中
- 5.下载gulp所需要的插件
- 6.执行gulp
