杯是一个自动化构建工具,开发者可以用它来自动执行一些常见的任务。这里以我之前做的一个演示为例,简要介绍如何使用吞咽实现前端工程自动化。
<强>项目结构
其中src目录下表示的是项目的源代码,可以看到其中有少,js、html等,而dist目录则是保存的是大口编译后生成的代码,相当于生产环境。最后也最重要的是gulpfile.js,这个文件用于设置杯相关的配置,类似于webpack中的webpack.config。js。
<>强安装
这里使用的杯为v3.9.1,语法和最新的v4.x有所出入,想学习最新的大口语法,可以参考饮而尽。js -流构建系统。
3.9.1安装如下:
npm安装——save-dev大口
语法
<李> gulp.task()用于定义一个大口任务,在命令行中可以使用杯[任务名]开启该任务。
<李> gulp.src()会返回符合匹配的文件流,可以被管()到其他插件中。
<李> gulp.dest():输出所有数据。
<李> gulp.watch()用于监测文件的变动。
<>强实践
在这个项目中,有一些常见的需求,这里使用杯来实现自动化:
<李>少转css李
<李> css压缩合并李
<李> js压缩合并李
<李>图片压缩李
在gulpfile。js中首先需要导入杯和一些常用的插件,本次演示使用到的插件如下:
var杯=要求(“吞咽”),
少=要求(“gulp-less”),//少转css
csso=要求(gulp-csso)//css压缩
concat=要求(“gulp-concat”),//合并文件
糟蹋=要求(gulp-uglify)//js压缩
jshint=要求(gulp-jshint)//js检查
清洁=要求(“gulp-clean”),//清除文件
imagemin=要求(gulp-imagemin)//图片压缩
牧师=要求(“gulp-rev”),//添加版本号
revReplace=要求(gulp-rev-replace)//版本号替换
useref=要求(gulp-useref)//解析html资源定位
gulpif=要求(gulp-if)//如果语句
连接=要求(“gulp-connect”);//创建web服务器
<强>图片压缩
获取到src下所有以jpg或png结尾的图片,将其压缩后输出到dist目录下。
饮而尽。任务(dist: img,()=比;{
gulp.src ([’。/src/* */* . jpg”、“。/src/* */* . png])
.pipe (imagemin ())
.pipe (gulp.dest (dist/))
})
<>强少压缩合并为css
先清除已存在的css,然后将src下以.less结尾的文件通过少()转为css文件,再通过csso()以及concat()实现对css的压缩合并。
饮而尽。任务(dist: css,()=比;{
gulp.src (dist/css/* . css) .pipe(清洁());
返回gulp.src (“。/src//* .less”)
少.pipe (())
.pipe (csso ())
.pipe (concat (public.css))
.pipe (gulp.dest (' dist/css/'));
});
之前
<强> js压缩合并
js压缩合并的过程大同小异,增加了一个jshint()代码审查的过程,它会将不符合规范的错误代码输出到控制台。
饮而尽。任务(“dist: js”,()=比;{
gulp.src (dist/js/* . js) .pipe(清洁());
返回gulp.src (’。/src/js/* . js”)
.pipe (jshint ())
.pipe (jshint.reporter(“违约”))
.pipe(糟蹋())
.pipe (concat (public.js))
.pipe (gulp.dest (dist/js/))
});
<强>=少在css
在开发过程中,因为html不能直接引入.less文件,因此还需要生成开发环境的。css。
饮而尽。任务(src: css,()=比;{
gulp.src (src/css/* . css) .pipe(清洁());
返回gulp.src (“。/src//* .less”)
少.pipe (())
.pipe (gulp.dest (' src/css/'));
});
之前
<强>添加版本号
为了防止浏览器对文件进行缓存,需要对文件添加版本号,保证每次获取到的都是最新的代码。
饮而尽。任务(“修订”,[dist: css, ' dist: js '],()=比;{
返回gulp.src ([" dist/css/*。css”、“dist/js/* . js”)
.pipe(牧师())
.pipe (gulpif (‘*。css, gulp.dest (dist/css), gulp.dest (dist/js)))
.pipe (rev.manifest ())
.pipe (gulp.dest(“区域”))
}）
饮而尽。任务(“构建”,[的dist: img],()=比;{
var manifest=gulp.src (“dist/rev-manifest.json”);
返回gulp.src (src/index . html)
.pipe (revReplace ({
清单:清单
}))
.pipe (useref ())
.pipe (gulp.dest (dist/))
}）
