安装
## 安装 gulp 命令行工具
npm install --global gulp-cli## 安装 gulp,作为开发时依赖项
npm install --save-dev gulp
为什么要用Gulp ?
在前端开发中,Gulp是一个node.js 的自动化构建工具,它通过流和代码优于配置的策略来简化任务编写的工作,可以帮助开发者构建自动化工作流程,如:
- 网页自动刷新、
- CSS预处理、
- 代码检测、
- 图片压缩等,
只需要简单的命令行就可以全部完成,提高了开发效率和质量。
官网
https://www.gulpjs.com.cn/docs/getting-started/quick-start/
实践
先决条件
管理员运行powershell
## 解除powershell 脚本运行
set-executionpolicy remotesigned
安装依赖
npm install gulp-cli -g###
npm install gulp --save-dev
文件目录
root@vm-local:~/knight# tree myapp
myapp
├── dist
│ └── js
│ └── app.js
├── gulpfile.js
├── node_modules
├── package.json
├── package-lock.json
└── src├── app.js└── config.json5 directories, 6 files
gulpfile.js
var gulp = require('gulp'); // 导入gulp
var uglify = require('gulp-uglify'); // 导入gulp-uglify// 创建压缩任务,knight-js 是任务名
gulp.task('knight-js', done=> {// 1. 找到文件gulp.src('src/*.js')// 2. uglify压缩.pipe(uglify())// 3. 另存到dist压缩后的文件.pipe(gulp.dest('dist/js'))done()
})
开始打包
# check task
gulp --tasks## build
gulp knight-js## 运行
node .\dist\js\app.js