作为一个前端开发者，必须要掌握一些自动化构建工具，而 gulp.js 是其中最为流行的一个。而 gulp-web-build 这个 npm 包则提供了一些方便快捷的方法来构建前端项目。
安装
首先需要全局安装 gulp：
npm install -g gulp
然后在项目中安装 gulp-web-build：
npm install gulp-web-build --save-dev
使用
构建任务
在 gulpfile.js 中定义构建任务：
var gulp = require('gulp');
var build = require('gulp-web-build');
gulp.task('build', function() {
return gulp.src('app/*.js')
.pipe(build())
.pipe(gulp.dest('dist'));
});这个任务将会用 gulp-web-build 来处理所有的 js 文件，并将处理后的文件输出到 dist 目录中。
配置文件
在项目根目录下创建 build.config.js 文件来进行配置：
-- -------------------- ---- -------
-------------- - -
----- -
---- ------
----- ------
--
--- -
------ --------
-
--这个配置文件中配置了两个目录：原始文件所在的 app 目录和处理后文件的输出目录 dist。同时设置了 js 文件的入口文件为 app.js。
示例
假设 app 目录下有以下文件：
app/ ├── app.js ├── header.js └── footer.js
然后在 gulpfile.js 中定义一个构建任务：
-- -------------------- ---- -------
--- ---- - ----------------
--- ----- - --------------------------
--- ------ - -----------------------------
------------------ ---------- -
------ ------------------------ - --- - ----------------
--------------
-----------------------------------
---这个任务将会用 gulp-web-build 来处理 app.js 文件，并将处理后的文件输出到 dist 目录中。
包含的处理方法
gulp-web-build 包含了以下处理方法：
jsmin
压缩 js 文件。
.build('jsmin');cssmin
压缩 css 文件。
.build('cssmin');autoprefixer
为 css 文件添加浏览器前缀。
.build('autoprefixer');babel
将 es6 转为 es5。
.build('babel');Less
处理 Less 文件，将 Less 文件编译为 css 文件。
.build('less');sass、scss
处理 Sass/SCSS 文件，将 Sass/SCSS 文件编译为 css 文件。
.build('sass');
.build('scss');总结
通过使用 gulp-web-build，我们可以更方便快捷地构建前端项目。同时，我们也可以通过添加自定义的处理方法来满足我们的特定需求。希望这份教程能够帮助到你学习 gulp-web-build 并提高你的前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/142579