gulp的初级使用

2018-03-27

gulp的初级使用

介绍

gulp是前端开发过程中对代码进行自动化构建的工具。刚看的时候也是不了解，在实践之后，觉得gulp就是用来简化前端工作量的，可以对资源进行优化，也可以在开发过程中通过配置自动完成一些重复的工作，比如监测文件的改变、浏览器自动刷新，

安装

gulp依赖node
1.全局安装gulp, 使用npm安装

1	npm install --global gulp

检查是否安装成功

gulp -v

2.创建gulp文件夹，在文件夹跟目录下安装，作为项目的开发依赖包

1	npm install --save-dev gulp

使用

在根目录下

npm init

会有一些配置，可以选择回车用默认配置，生成一个package.json的文件, npm install 时会根据package.json 安装包依赖

根目录下建一个gulpfile.js的文件，用来配置gulp
放个最简单的配置

var gulp = require('gulp');

gulp.task('default', function() {
	// 将你的默认的任务代码放在这
	console.log('test');
});

键入gulp命令：

gulp

直接使用gulp会执行默认的名为default的任务（task），在这里，这个任务是输出test
想要单独执行特定的任务（task），输入 gulp task名

输出如下：

[17:28:01] Using gulpfile ~/study/cj/qwe/gulpfile.js
[17:28:01] Starting 'default'...
test
[17:28:01] Finished 'default' after 258 μs

实例

使用gulp 和 babel 来将es6语法转为es5
这里就需要用到gulp的插件，gulp有很多插件，这个插件用到 gulp-babel
1.安装插件

1	npm install --save-dev gulp-babel babel-preset-es2015

2.gulpfile.js 文件修改

<!-- 引入插件 -->
var gulp = require('gulp');
var babel = require('gulp-babel');

<!-- gulp.task(name[,deps], fn) 定义一个任务-->
gulp.task('gulpTest', function() {
	<!-- gulp.src(globa[,options]) 指定符合匹配模式的文件-->
	gulp.src('src/app.js')
		<!-- 通过pipe函数把内容传给下一个处理方法 -->
		.pipe(babel({
			presets: ['es2015']
		}))
		<!-- gulp.dest(path[,options]) 输出处理后的文件内容，如果没有该文件，就会新建-->
		.pipe(gulp.dest('dist'))
})

gulp.task('default', function() {
	<!-- gulp.watch(glob[,opts], tasks)(一个字符串或包含多个字符串的数组，用来指定具体监控哪些文件的变动, 在文件变动后执行tsak任务) -->
	gulp.watch('src/app.js', ['gulpTest'])
})

3.新建src/app.js文件，内容为：

1	(i) => i + 1

4.运行gulp命令

1	gulp gulpTest

5.查看是否正确
在 dist/app.js

"use strict";

(function (i) {
  return i + 1;
});

6.查看gulp.watch是否成功
执行gulp默认的task任务

gulp

修改src/app.js
查看dist/app.js是否同步更新

spore-mock的使用

1.安装

<!-- 安装path -->
npm install path
<!-- 安装spore-mock -->
npm install spore-mock

2.创建文件
根目录创建config.js文件，内容为

const $path = require('path');
const $config = {};
// 任务运行时环境，保存任务执行期间一些环境参数
$config.context = {};
// 在任何模块内部，可以使用__dirname变量获取当前模块文件目录所在的完整绝对路径
$config.root = $path.resolve(__dirname);
// 源代码路径
$config.src = 'src';
// 初步构建生成路径
$config.dist = 'dist';
// 开发服务端口
$config.devServerPort = 8080;
// 反向代理配置
$config.proxy = [
	{
		// 反向代理示例
		// 到 http://127.0.0.1:8080/proxy/index.php 的请求，都会转发到
		// http://m.db.house.qq.com/index.php
		route: '/proxy/index.php',
		proxy: {
			target: 'http://openapi.house.qq.com',
			changeOrigin: true,
			logLevel: 'debug',
			secure: false
		}
	}
]
module.exports = $config;

根目录创建server文件夹，创建mock.js文件，内容为

const $config = require('../config');
module.exports = {
	// root: $config.root,
	port: $config.devServerPort,
	// mock 数据文件所在路径
	mock: './mock',
	// 页面文件所在路径
	template: './src',
	// 链接列表，用于显示到首页
	// links: [
	// 	{
	// 		href: 'http://{{publicIp}}:' + $config.mockServerPort,
	// 		text: 'Mock服务 http://{{publicIp}}:' + $config.mockServerPort
	// 	},
	// 	{
	// 		href: 'http://{{publicIp}}:' + $config.proxyServerPort,
	// 		text: '代理服务 http://{{publicIp}}:' + $config.proxyServerPort
	// 	}
	// ],
	// 反向代理
	proxy: $config.proxy,
	// mock数据渲染前统一格式化函数
	mockFormat(mockData) {
		return {
			htmlWebpackPlugin: {
				options: {
					mock: mockData
				}
			}
		};
	},
	// 指定静态文件路径
	statics: [
		{
			route: '/dist',
			path: $config.dist
		},
		{
			route: '/',
			path: $config.src
		}
	]
};

根目录创建mock文件夹，mock/mockapi/demo/test.js，模拟接口数据，内容为

module.exports = {
	code: 0,
	msg: 'ok',
	data: {
		title: 'test title'
	}
};

3.使用
gulpfile.js引入

1
2
3

const $path = require('path');
const $sporeMock = require('spore-mock');
const $config = require('./config');

创建任务

$gulp.task('serve', done => {
	$sporeMock({
		configFilePath: $path.join($config.root, 'server/mock.js')
	})
})

启动

1	npm run start

启动时报错有可能是因为node版本太低
[MOCK] Mock server started at http://127.0.0.1:8080
[MOCK] Check api list at http://127.0.0.1:8080/admin
在浏览器中打开默认首页：http://127.0.0.1:8080
页面和接口列表：http://127.0.0.1:8080/admin

gulp插件

所有插件：https://gulpjs.com/plugins/