前言
随着前端技术的不断发展和更新，前端工程化已经逐渐成为了前端开发的标配。而其中的自动化构建工具也成为了前端必备的一个工具。gulp 就是一个非常好用的自动化构建工具，而 werkint-gulp 是基于 gulp 的一个 npm 包，其简介为：提供基于 gulp 的 web 前端自动化工作流高度定制化解决方案。
安装 werkint-gulp
npm 是 Node.js 的包管理器，自然在使用 werkint-gulp 前，需要在全局先安装 gulp。输入以下命令即可安装 gulp：
npm install gulp -g
安装 gulp 完成后，再输入以下命令，安装 werkint-gulp：
npm install werkint-gulp --save-dev
之后，我们就可以使用 werkint-gulp 提供的功能来完成前端自动化构建。
基本功能介绍
- sass 编译
web 前端样式，目前有非常多的选择，但内部核心仍然只有两种：less 与 sass。werkint-gulp 可以很好地支持 sass 编译，只需要在 gulpfile 中加上以下代码，即可自动编译 sass：
gulp.task('sass', function () {
return gulp.src('path/to/sass/*.scss')
.pipe(sass())
.pipe(gulp.dest('path/to/css'));
});- css 压缩
由于网络请求速度较慢，为了加快网站响应速度，我们可以将所有的 css 文件都压缩成一个文件，werkint-gulp 提供了一个非常方便的 css 压缩插件：
gulp.task('minifycss', function () {
return gulp.src('path/to/css/*.css')
.pipe(minifycss())
.pipe(concat('all.css'))
.pipe(gulp.dest('path/to/build'));
});- 图片压缩
图片加载也是页面打开速度极为重要的因素之一，为了提高用户体验，我们可以使用 gulp-imagemin 插件来压缩图片以减小图片大小：
gulp.task('imagemin', function () {
return gulp.src('path/to/images/*.*')
.pipe(imagemin())
.pipe(gulp.dest('path/to/build'));
});- js 合并压缩
js 合并压缩能够有效减小 js 文件大小并加快页面响应速度：
gulp.task('uglify', function () {
return gulp.src('path/to/js/*.js')
.pipe(uglify())
.pipe(concat('all.js'))
.pipe(gulp.dest('path/to/build'));
});实例演示
我们可以使用以下代码进行实例演示，将 gulpfile.js 编写如下：
-- -------------------- ---- -------
--- ---- - ----------------
---- - ---------------------
--------- - ---------------------------
-------- - -------------------------
------ - -----------------------
------ - -----------------------
----------------- -------- -- -
------ -------------------------------
-------------
--------------------------------
---
---------------------- -------- -- -
------ -----------------------------
------------------
------------------------
----------------------------------
---
------------------- -------- -- -
------ ---------------------------
---------------
-----------------------
----------------------------------
---
--------------------- -------- -- -
------ ------------------------------
-----------------
----------------------------------
---
-------------------- -------- ------------ --------- -------------在执行 gulp 命令后，即可在 path/to/build 目录下生成合并压缩后的 css、js 和图片。
总结
werkint-gulp 是一个非常好用的 npm 包，能够在 web 前端自动化构建过程中提供非常多的帮助。使用 gulp 来进行自动化构建已经成为了前端开发的标配，相信掌握了 werkint-gulp 使用方法之后，会对前端开发工作产生很大的帮助，并在项目中发挥重要作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671078dd3466f61ffde5c