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

地址：http://npm.taobao.org

安装：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即时会显示到页面中。