在前端开发中，我们常常需要快速搭建一些基础的代码结构，比如构建工具的配置，文件目录的设计等。这时候，就可以利用 npm 包提供的模板生成工具来快速构建项目结构。generator-striblab 就是一个非常好用的生成器，它能够生成出一个基于 gulp 的前端项目结构，并且支持自定义配置，让开发者能够快速搭建出自己需要的项目结构。
generator-striblab 的安装
首先，我们需要安装 yeoman 和 generator-striblab：
npm install -g yo generator-striblab
生成项目结构
安装成功后，我们就可以开始生成项目结构了。执行以下命令：
yo striblab
接下来，会有一系列的询问，从项目名称、描述、作者等基本信息到涉及到 gulp 配置、文件结构等更加详细的信息。在此过程中，我们可以根据自己的需要进行自定义配置。
之后，generator-striblab 会自动根据我们的配置生成项目结构并且安装所需的依赖，我们只需要耐心等待即可。
项目结构分析
generator-striblab 生成的项目结构如下：
-- -------------------- ---- ------- --- ------------ - --- --- --- - ----------- - --- --- - ------ - --- ---- - ------ - --- --- - ------ - --- -- - -- -- -- - --- ---- - -- ---- -- - --- ---------- - -- ---- -- - --- ------- - -- -- -- --- ----------- - ---- ---- --- ------------ - --------- --- --------- - ------
在 src 目录下，我们可以看到具体的 TS、HTML、CSS 文件，这些文件已经做好了基本的工程化处理。比如，scss 中已经嵌入了公共变量和 mixin，JS 已经做好了 ts 和 babel 转译，CSS 已经加入了 autoprefixer 等前缀。
在 gulpfile.js 文件中，则定义了项目的构建任务，包括 JS 和 CSS 的压缩合并、图片的压缩、文件的文件名 Hash 化等等。
项目启动
在生成项目结构之后，还需要启动该项目。在项目根目录下，执行以下命令：
gulp # 或者 gulp serve
这时，我们就能够看到启动了一个服务器，打开浏览器，访问 http://localhost:8000 即可。
总结
利用 generator-striblab 我们能够快速搭建一个前端项目框架，省去了手动配置的繁琐过程。同时，该工具还支持自定义配置，适用范围非常广泛。在使用过程中，我们可以根据需要自由发挥和优化。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c9081e8991b448ebeca