前言
在前端开发中，我们经常需要使用一些工具来加快开发速度。这些工具可以是框架、库、插件等，它们为我们提供了一些常用的功能。但是，对于一些小型的项目，我们并不想使用一个臃肿的框架或者大量的插件，这时候就有了一个叫做 small-project-boilerplate 的 npm 包。
small-project-boilerplate 是什么？
small-project-boilerplate 是一个基于 gulp 的项目脚手架，它提供了一些常用的功能，例如编译 Less、压缩 CSS 和 JavaScript、自动添加 CSS 前缀等，同时它又非常轻量级，只有几个文件。
使用步骤
安装
你可以直接使用 npm 来安装 small-project-boilerplate：
--- ------- ------------------------- ----------
初始化
在项目的根目录下创建一个 gulpfile.js 文件，复制下面的代码：
--- ---- - ----------------
--- ----------------------- - -------------------------------------
--- -------- - -
---- -
---- --------------------
--- -----------------
--
----- -
---- -----------
--- ---------
-
--
----------------------------- ----------这段代码导入了 gulp 和 small-project-boilerplate 模块，并设置了一些小项目的目录结构。
编译 Less
在项目的根目录下创建一个 src 目录，里面再创建一个 css 目录，并在里面创建一个 main.less 文件，添加以下代码：
---- - ----------- ----- -
然后运行以下命令：
---- ---
这时候会在 dist/css 目录下生成一个 main.min.css 文件，打开它，就会发现它被压缩了并且自动添加了 CSS 前缀。
压缩 JavaScript
在项目的根目录下创建一个 src 目录，里面再创建一个 js 目录，并在里面创建一个 index.js 文件，添加以下代码：
------------------ ---------
然后运行以下命令：
---- --
这时候会在 dist/js 目录下生成一个 index.min.js 文件，打开它，就会发现它被压缩了。
监听文件修改
在开发时，我们经常需要监听文件的修改，然后重新编译。你可以使用以下命令来监听 CSS 和 JavaScript 文件的修改：
---- -----
这时候，每当你修改了一个文件，gulp 就会自动重新编译相关的文件。
总结
small-project-boilerplate 是一个非常实用的 npm 包，它提供了一些常用的功能，并且非常轻量级。使用它能够让你在开发小型项目时省去很多不必要的麻烦。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005671a81e8991b448e3737