欢迎点击「算法与编程之美」↑关注我们！
本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。
问题描述
gulp是一个自动化构建工具，主要用来设定程序自动处理静态资源的工作。简单的说，gulp就是用来打包项目的。
解决问题
1 安装
Nodejs 进入 http://nodejs.org/en 下载 12.15.0LTS 完成后双击安装。
图 1、2、3 安装
打开CMD检查是否正常。
图 4 检查
2 使用
创建根目录 my_project 并进入。
npx mkdirp my-project
cd my-project
在项目目录下创建 package.json 文件。
npm init
安装 gulp，作为开发时依赖项。
npm install --save-dev gulp
在项目的根目录下创建 gulpfile.js ，名字一定不能写错。并在文件里写入以下内容：
const gulp = require("gulp");
//定义任务
gulp.task("message",function (done) {
console.log("gulp is running!!");
done()
});
js
//定义默认任务
gulp.task("default",gulp.series(['message','copyHtml','scripts','sass','imageMin']));
在项目根目录下执行命令 gulp message ，命令gulp执行默认任务命令。
出现以下内容就运行成功了。
C:\Users\19145\my-project>gulp message
[14:34:39] Using gulpfile ~\my-project\gulpfile.js
[14:34:39] Starting 'message'...gulp is running!!
[14:34:39] Finished 'message' after 1.85 ms
接下来介绍几个常用的插件
文件目录：
├── dist //处理后的文件存放位置
├── node_modules
├── src //项目静态文件存放位置
├── gulpfile.js
└── package.json
(1) 拷贝文件
//拷贝文件
gulp.task("copyHtml" ,function(done){
gulp.src("src/*.html").pipe(gulp.dest("dist"));
done();
});
(2) 图片压缩
var imagemin = require("gulp-imagemin");
//图片压缩
gulp.task("imageMin",function (done) {
gulp.src("src/image/*").pipe(imagemin()).pipe(gulp.dest("dist/images"));
done();
});
(3) 压缩JS
var uglify = require("gulp-uglify");
//压缩js
gulp.task("minify",function (done) {
gulp.src("src/js/*.js").pipe(uglify()).pipe(gulp.dest("dist/js"));
done()
});
(4) sass 转换 css
var sass = require("gulp-sass");
// sass 转换 css
gulp.task("sass",function (done) {
gulp.src("src/sass/*.scss").pipe(sass()).pipe(gulp.dest("dist/css"));
done()
});
(5) 代码合并
var concat = require("gulp-concat");
//代码合并
gulp.task("scripts",function (done) {
gulp.src("src/js/*.js").pipe(concat("min.js")).pipe(uglify()).pipe(gulp.dest("dist/js"));
done()
});
(6) 监听文件
const gulp = require("gulp");
var imagemin = require("gulp-imagemin");
var uglify = require("gulp-uglify");
var sass = require("gulp-sass");
var concat = require("gulp-concat");
//监听文件gulp.task('watch',async()=> {
gulp.watch("src/js/*.js",async()=>{
gulp.src("src/js/*.js")
.pipe(concat("min.js"))
.pipe(uglify())
.pipe(gulp.dest("dist/js"));
});
gulp.watch("src/image/*",async()=>{
gulp.src("src/image/*")
.pipe(imagemin())
.pipe(gulp.dest("dist/images"));
});
gulp.watch("src/sass/*.sass",async()=>{
gulp.src("src/sass/*.scss")
.pipe(sass())
.pipe(gulp.dest("dist/css"));
});
gulp.watch("src/*.html",async()=>{
gulp.src("src/*.html")
.pipe(gulp.dest("dist"));
});
});
END
实习编辑 | 王文星
责 编 | 刘玉江
where2go 团队
微信号：算法与编程之美
长按识别二维码关注我们!
温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！
