gulp的基本使用
gulp的基本使用
1：什么是gulp？
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器，既可以对网站资源进行优化，也可以对开发中的重复任务自动完成。
gulp是基于node的自动化构建工具，能够自动完成javascript/coffee/sass/css/html/image等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件再改动后重复指定的这些步骤。
gulp是基于任务的，通过插件的配合使用全面解决前端方案
原理是借助Unix中的管道（pipe）思想，前一级输入，后一级输出。
gulp是采用流操作，grunt是采用I/O操作
2：gulp使用步骤
安装node -> 通过npm全局安装和项目安装gulp -> 项目安装gulp插件 -> 配置gulpfile.js -> 运行任务
1）安装nodejs
gulp是基于node的，必须安装node，安装过程参照官网
2）检查nodejs是否安装成功
node -v
npm -v
cd ....
dir
cls
3）npm
npm install <name> [-g][--save-dev]
name:node插件名称，npm install gulp-less --save-dev
-g:全局安装，将会安装到C:\Users\Administrator\AppData\Roaming\npm\node_modules，通过命令行在require()获取
--save:将保存信息在package.json
-dev:将保存信息在package.json的devDependencies下，不指定-dev将会保存在dependiencs下
npm uninstall <name> [-g][--save-dev]
npm undate <name> [-g][--save-dev]
npm help
npm list
4）选装cnpm
由于npm安装插件是从国外服务器下载，所以万能的淘宝团队做了一个npm的镜像cnpm
安装：npm install cnpm -g --registry=https://registry.npm.taobao.org
安装后使用cnpm -v 查看版本号，直接使用有可能出现问题，把终端关掉重新打开在使用
cnpm与npm用法一直，用cnpm替代npm即可
5）全局安装gulp
全局安装gulp是为了通过它执行gulp任务
安装：
npm install gulp -g
npm install --global gulp
版本号查看： gulp -v
出现以下极为安装成功：
CLI version 3.9.1
Local version 3.9.1
6）新建package.json文件
package,jspn是基于nodejs项目必不可少的配置文件，是存放在项目根目录的json文件，json文件是不能有注释的
既可以手动创建json文件
命令使用：
npm init
7）本地安装gulp以及gulp插件
npm install --save-dev gulp
npm install gulp --save-dev
全局安装gulp是为了调用gulp
本地安装gulp是为了调用本地的gulp插件
8）新建gulpfile.js文件
gulpfile.js是gulp项目的配置屋文件，位于项目根目录下的普通js文件
编辑：
var gulp = require("gulp"),//引入gulp模块
less = require("gulp-less");//引入less模块
/*定义一个taskless任务，任务名称自己定义*/
gulp.task("testless",function(){
gulp.src("src/less/index.less")//源文件
.pipe(less())//调用模块
.pipe(gulp.dest("src/css"))//在src/css/目录下生成css文件
});
/*定义默认任务，名称固定*/
gulp.task("default",["testless"]);
9: 运行gulp
gulp 任务名称
gulp testless
gulp default 或者gulp默认调用default里的所用任务，按顺序执行
10：使用webstorm运行gulp
打开gulpfile.js文件，右键鼠标，点击Show Gulp Tasks，会出现一个任务窗口，双击一个任务就会执行该任务
11 gulp语法基础
gulp通过gulpfile.js来完成任务
gulp有5个方法：src、dest、task、run、watch
src：指定源文件
dest：指定目标文件
task：指定任务
run：执行任务
watch：监听任务的变化
12 选择gulp组件
gulp plugins ：寻找gulp组件
前端项目所需要的功能：
- 图片：压缩图片支持jpg、png、gif
- 样式：支持sass、lass等编译，支持css的合并、压缩、重命名
- javascript：检测，合并，压缩，重命名
- html：压缩
- 客户端同步刷新显示修改
- 构建项目前清除发布环境下的文件，从而保持发布环境的干净
以下是所需要使用插件
- gulp-imagemin：图片压缩
- gulp-ruby-sass：支持sass编译
- gulp-sass：支持sass编译
- gulp-less：支持less编译
- gulp-minify-css：压缩css
- gulp-jshint：检查js
- gulp-uglify：压缩js
- gulp-concat：合并文件
- gulp-rename：重命名文件
- gulp-htmlmin：压缩html
- gulp-clean：清空文件夹
- gulp-livereload：服务器控制客户端同步刷新（需配合chrome插件LiveReload及tiny-lr）
在项目目录下执行以下命令安装插件
npm install gulp-imagemin gulp-ruby-sass gulp-miniy-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-livereload tiny-lr --save-dev
13：编写gulp
14：LiveReload配置
- 安装Chrome插件 LiveReload
- 通过npm安装http-server，快速建立http服务：npm install http-server -g
- 进入项目的发布环境dist
- 运行http-server，默认端口号是8081
- 用浏览器打开：localhost:8081
- 打开另一个cmd，进入项目执行gulp，清空坏境并初始化
- 执行监控gulp
- 点击chrome上的LiveReload插件，空心变成实心即关联上，你可以修改css、js、html即时会显示到页面中。
