Gulp是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见的任务。是基于Node国家的，利用Node.js流的威力，可以快速构建项目。
Link
优势
- 易于使用: 通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
- 构建快速: 利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。
- 插件高质: Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。
- 易于学习: 通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。
压缩JS任务构建流程图
读取src目录下要压缩的js文件 —$管道(pipe)$–> uglify压缩 —$管道(pipe)$–> 输出到dist目录 —$管道(pipe)$–> babel转换es6代码
使用
环境准备
依赖环境是 Node.js (>=8.x), npm version 6+, npx version 6+。
# 全局安装
$ npm i gulp-cli -g
v3.9.1是2016.2月发布的。v4.x的版本是2018年初发布的。
gulp4.x以上的版本需要安装
gulp-cli。
创建Demo
$ npx mkdirp gulp-demo
$ cd gulp-demo
配置package.json
$ npm init
本地安装
$ npm i gulp@next -D
配置gulpfile
创建一个 gulpfile.js的配置文件。
const gulp = require('gulp');
gulp.task('default', defaultTask);
function defaultTask(done) {
console.log('default is runing');
done();
}
运行gulp，控制台显示以下内容，即运行成功。
➜ gulp-demo gulp
[18:00:04] Using gulpfile ~/Desktop/gulp-demo/gulpfile.js
[18:00:04] Starting 'default'...
default is runing
[18:00:04] Finished 'default' after 3.07 ms
插件
- gulp-babel
- 使用babel转换ES6代码
- gulp-uglify
- 压缩 JS
- gulp-nodemon
- 使用nodemon来监视node.js应用程序中的更改并自动重启服务
安装
-
babel编译
- babel-core
- babel-preset-env
- babel-register
-
gulp
-
gulp@next
-
gulp-babel
-
$ npm i -D gulp-babel@7 babel-core babel-preset-env
-
-
gulp-uglify
-
gulp-nodemon
-
-
其它
- express
- del
-
控制台
$ npm i -D del express gulp@4.0.0 gulp-nodemon@2.4.2 gulp-uglify@2.0.0
ES6 的转换
建立.babelrc的文件
{
"presets": [
"env"
]
}
配置gulpfile.js
在gulpfile.js中编写任务。
参考文档
- 函数
clean()使用del在每次执行的时候，必须先将dist文件夹删除。 - 函数
scripts()使用pipe管道的方法执行bael()转化为ES5在进行压缩。 - 函数
nodemon()使用nodemon来监听指定的目录并进行自动执行tasks: ['default']中的任务。 - 使用
gulp.series()来打包任务，方法里面可以放置多个需要同时执行的任务。 - 可以通过
gulp.task()来建立脚本。第一个参数是执行的命令，第二个参数是执行的内容。
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const nodemon = require('gulp-nodemon');
const del = require('del');
// 设置路径
const paths = {
src: 'src/*',
dest: 'dist/*'
}
// 在执行之前必须先清空目录
function clean(){
return del(['dist']);
}
// 转化ES6
// gulp.src()中第二个参数必须写，否则不会将src中的目录生成到dist目录中
// babel()将ECS6语法转化为ES5语法
// uglify是不支持ES6语法的
// gulp.dest()编译到指定的文件夹
function scripts(){
return gulp.src(paths.src, { sourcemaps: true })
.pipe(babel())
.pipe(uglify())
.pipe(gulp.dest(paths.dest));
}
// nodemon 监控src并自动执行脚本
function nodemons(done){
nodemon({
script: 'dist/index.js',
ext: 'js',
watch: paths.src,
tasks: ['default'],
env: { 'NODE_ENV': 'development' }
})
done();
}
const build = gulp.series(clean,gulp.parallel(scripts));
const server = gulp.series(clean, scripts, nodemons);
gulp.task('default', build);
gulp.task('server', server);
运行gulp控制台显示以下内容，就是OK了。
➜ gulp-demo gulp
[18:41:53] Using gulpfile ~/Desktop/gulp-demo/gulpfile.js
[18:41:53] Starting 'default'...
[18:41:53] Starting 'clean'...
[18:41:53] Finished 'clean' after 5.04 ms
[18:41:53] Starting 'scripts'...
[18:41:53] Finished 'scripts' after 23 ms
[18:41:53] Finished 'default' after 31 ms
使用Express建立路由
文件结构
┌───────────src┌── config // 配置信息
│ │ ├── config.js
├──.babelrc │ └── express.js
├──gulpfile.js ├── server
└──package.json│ └── routes // 路由目录
│ └── index.route.js // 主路由
└── index.js // 入口
文件代码
-
config.js
const config = { version: '1.0.0', env: 'development', port: '3000' }; module.exports = config; -
express.js
const express = require('express'); const config = require('./config'); const index = require('../server/routes/index.route'); const app = express(); app.get('/', (req, res) => { res.send(`server started on port http://127.0.0.1:${config.port} (${config.env})`); }); app.use('/api', index); module.exports = app; -
index.route.js
const express = require('express'); const config = require('../../config/config'); const router = express.Router(); router.get('/', (req, res) => { res.send(` localhost:${config.port}/api 已经开启`); }); module.exports = router; -
index.js
const config = require('./config/config.js'); const app = require('./config/express.js'); if (!module.parent) { app.listen(config.port, () => { console.log(`server started on post http://127.0.0.1:${config.port} (${config.env})`); }); } module.exports = app; -
package.json
{ "name": "gulp-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "gulp serve", "build": "gulp" }, "author": "Azr", "license": "ISC", "devDependencies": { "@babel/core": "^7.2.0", "babel-cli": "^6.26.0", "babel-core": "^6.26.3", "babel-preset-env": "^1.7.0", "babel-register": "^6.26.0", "del": "^3.0.0", "express": "^4.16.4", "gulp": "^4.0.0", "gulp-babel": "^8.0.0", "gulp-nodemon": "^2.4.2", "gulp-uglify": "^2.0.0" } }
运行
运行npm run build会多一个dist的文件夹，控制台显示内容如下:
➜ gulp-demo npm run build
> gulp-demo@1.0.0 build /Users/amor/Desktop/gulp-demo
> gulp
[19:06:36] Using gulpfile ~/Desktop/gulp-demo/gulpfile.js
[19:06:36] Starting 'default'...
[19:06:36] Starting 'clean'...
[19:06:36] Finished 'clean' after 33 ms
[19:06:36] Starting 'scripts'...
[19:06:37] Finished 'scripts' after 698 ms
[19:06:37] Finished 'default' after 738 ms
运行npm run start控制台显示内容如下
➜ gulp-demo npm run start
> gulp-demo@1.0.0 start /Users/amor/Desktop/gulp-demo
> gulp serve
[19:07:01] Using gulpfile ~/Desktop/gulp-demo/gulpfile.js
[19:07:01] Starting 'serve'...
[19:07:01] Starting 'clean'...
[19:07:01] Finished 'clean' after 8.66 ms
[19:07:01] Starting 'scripts'...
[19:07:02] Finished 'scripts' after 1.48 s
[19:07:02] Starting 'nodemons'...
[19:07:03] Finished 'nodemons' after 85 ms
[19:07:03] Finished 'serve' after 1.58 s
[19:07:03] [nodemon] 1.18.7
[19:07:03] [nodemon] to restart at any time, enter `rs`
[19:07:03] [nodemon] watching: src/**/*
打开 127.0.0.1：3000/api看看页面显示内容，试着更改内容看看页面有没有自动刷新。
完
本文首次发布于 Azr的博客, 作者 @azrrrrr ,转载请保留原文链接.
原文链接： http://amor9.cn/2018/12/10/gulp/
