gulp初体验
Posted 海芋花语录
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp初体验相关的知识，希望对你有一定的参考价值。
相信在开发过程中大家经常用到打包工具，今天就为大家来介绍一下gulp
Gulp介绍
* 创建一个简单的应用gulp_test(目录结构)
|- dist
|- src
|- js
|- css
|- index.html
|- gulpfile.js-----gulp配置文件
|- package.json
{
"name": "gulp_test",
"version": "1.0.0"
}
* 安装gulp:
1.全局安装 gulp：npm install --global gulp
2.作为项目的开发依赖（devDependencies）安装:npm install --save-dev gulp
3.在项目根目录下创建一个名为 gulpfile.js 的文件:
var gulp = require('gulp');
gulp.task('任务名', function() {
// 将你的默认的任务代码放在这
});
gulp.task('default', ['任务'])//异步执行
4.运行 gulp：gulp
var $ = require('gulp-load-plugins')();
//相当于function 可以替换下面插件var的变量名称
//例如:var rev = require('gulp-rev'); 可以写成$.rev()
下面就简单的介绍一下用法,首先需要引入一些插件以及一些相关api
* gulp相关插件:
* gulp-concat : 合并文件(js/css)
* gulp-uglify : 压缩js文件
* gulp-rename : 文件重命名
* gulp-less : 编译less
* gulp-clean-css : 压缩css
* gulp-livereload : 实时自动编译刷新
* 重要API
* gulp.src(filePath/pathArr) :
* 指向指定路径的所有文件, 返回文件流对象
* 用于读取文件
* gulp.dest(dirPath/pathArr)
* 指向指定的所有文件夹
* 用于向文件夹中输出文件
* gulp.task(name, [deps], fn)
* 定义一个任务
* gulp.watch()
* 监视文件的变化
* 处理js( 创建js文件)
* src/js/test1.js
* src/js/test2.js
* 下载插件:
npm install gulp-concat gulp-uglify gulp-rename --save-dev
```
* 配置编码
```
var concat = require('gulp-concat');//用于合并
var uglify = require('gulp-uglify');//用于压缩 JS
var rename = require('gulp-rename');//重命名
gulp.task('default', ['js']);
```
* 页面引入js浏览测试 : index.html
```
<script type="text/javascript" ></script>
```
* 打包测试: gulp
* 处理css(自行创建css文件)
* src/css/test1.css
* src/css/text2.css
* 下载插件:
```
npm install gulp-less gulp-clean-css --save-dev
* 配置编码
```
var cleanCSS = require('gulp-clean-css');//用于css压缩
//css处理任务, 指定依赖的任务
gulp.task('default', ['js', 'cssSh']);
```
* 页面引入css浏览测试 : index.html
```
<link rel="stylesheet" href="dist/css/built.min.css">
<div id="div1" class="index1">div1111111</div>
<div id="div2" class="index2">div2222222</div>
```
* 打包测试: gulp
* 处理html
* 下载插件:
npm install gulp-htmlmin --save-dev
* 配置编码
var htmlmin = require('gulp-htmlmin');
gulp.task('default', ['js', 'cssTask', 'html']);
* 修改页面引入
```
<link rel="stylesheet" href="css/built.min.css">
<script type="text/javascript" ></script>
(注意:必须跟打包结构一样,否则引入不正确)
```
* 打包测试: gulp
* 处理图片
* 下载插件:
npm install gulp-imagemin --save-dev
* 配置编码
var imagemin = require('gulp-imagemin'); //压缩图片
gulp.task('default', ['js', 'cssTask', 'html','imageSh']);
* 修改页面引入
```
<img src="./images/review.png" alt="">
(注意:必须跟打包结构一样,否则引入不正确)
```
* 打包测试: gulp
* 动态替换页面路径
* 下载插件:
npm install gulp-rev-collector --save-dev
* 配置编码
var revCollector = require('gulp-rev-collector');
gulp.task('default', ['js', 'cssTask', 'html','imageSh','rev']);
* 打包测试: gulp
* 效果
* 自动编译
* 下载插件
npm install gulp-livereload --save-dev
* 配置编码:
var livereload = require('gulp-livereload');
//所有的pipe
.pipe(livereload());
* 热加载(实时加载)
* 下载插件：gulp-connect
```
1、 npm install gulp-connect --save-dev
2、 注册 热加载的任务 server，注意依赖build任务
3、注册热加载的任务
* 清理目标目录(因为我们可能不只打包一次所以每次打包要把上一次目录清除
* 开始执行
至此,一个简单的gulp打包程序算是配置完成,有什么错误欢迎大家留言指导！
以上是关于gulp初体验的主要内容，如果未能解决你的问题，请参考以下文章