在前端开发中，我们经常需要使用构建工具来打包、压缩、静态检查、自动化部署等等。npm 包 silly_builder 是一个基于 gulp 的简单构建工具，它提供了一些常见的功能，例如编译 Sass、压缩 JavaScript、压缩图片等等。在本文中，我们将学习如何使用 silly_builder 进行前端项目构建。
安装
在使用 silly_builder 之前，首先需要安装它。我们可以通过以下命令进行安装：
npm install silly_builder --save-dev
这将会在本地安装 silly_builder 并将其添加到 package.json 的 devDependencies 中。
项目结构
在使用 silly_builder 时，我们需要将项目目录结构设置为以下方式：
-- -------------------- ---- ------- --- ---- - --- ---- - --- ---- - --- --- - --- ----- - --- ---------- --- ------ --- ----------- --- ------------
- app/ 目录包含了所有的源代码文件，包括 CSS、图片、JavaScript 和 Sass 文件。
- build/ 目录包含了构建之后生成的文件。
- gulpfile.js 中包含了 gulp 的任务配置。
gulpfile.js
在 gulpfile.js 文件中，我们需要配置文件的输入和输出路径，以及各个任务的功能。以下是一个简单的示例：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ---------------------
----- ------------ - ------------------------
----- ------- - ------------------------
----- ------- - -------------------
---------------- -- -- -
------ ----------------------------------
------------------------ ---------------
------------------------------ ------------
---------------------------------
---
---------------- -- -- -
------ -----------------------
---------------------------------
---
--------------- -- -- -
------ ----------------------
--------------------------------
---
-------------------- ------------------- ------ --------上面的代码定义了三个任务：css、img 和 js。其中，css 任务使用了 gulp-sass、autoprefixer 和 cssnano 来编译 Sass、自动添加前缀和压缩 CSS 文件；img 任务将 app/img 目录中的所有文件直接复制到 build/img 目录；js 任务同样将 app/js 目录中的所有文件直接复制到 build/js 目录。最后，通过将 css、img 和 js 任务组合成 default 任务，我们可以通过运行 gulp 命令来依次执行它们。
使用
现在我们可以在命令行中执行 gulp 命令来生成构建后的文件了。生成的文件将被放置在 build/ 目录中。
$ gulp
我们同样可以使用 watch 任务来监听文件的变化，在文件发生修改时自动执行相关的任务：
gulp.task('watch', () => {
gulp.watch('./app/sass/**/*', gulp.series('css'));
gulp.watch('./app/img/**/*', gulp.series('img'));
gulp.watch('./app/js/**/*', gulp.series('js'));
});使用 gulp watch 命令即可启动 watch 任务。
$ gulp watch
结论
在本文中，我们学习了如何通过 npm 包 silly_builder 来进行前端项目构建。我们首先介绍了安装 silly_builder 的方法，然后展示了如何配置 gulpfile.js 来定义任务，在最后提供了使用 gulp watch 来监听文件变化的方法。通过阅读本文，你可以了解如何使用 silly_builder 来简单地构建前端项目，并将其用于实践项目当中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/76052