在前端开发中，自动化工具是必备的。而 Gulp 则是当下最流行的自动化构建工具之一，而使用 Gulp 必然要用到其他插件，而 generator-gulp-static 就是一个能够帮助我们快速生成 Gulp 项目结构的 npm 包。下面就为大家介绍一下这个包的使用教程。
概述
generator-gulp-static 是一个 Yeoman 的脚手架生成器，可以为我们自动生成包含一些基础文件和目录的 Gulp 静态项目模版。
在使用 generator-gulp-static 前，需要先安装 Yeoman 和 generator-gulp-static。
npm install -g yo generator-gulp-static
安装完成后，我们就可以通过命令来使用它了。
生成项目
首先，我们需要在命令行中输入以下命令来生成项目：
yo gulp-static
接下来，会出现一个问答式的交互页面，让我们选择某些项目选项，包括项目名称、项目描述、作者等，需要一一填写完成。完成填写后，回车进入第二个交互页面，询问是否需要添加常用代码块，以及是否需要自动安装依赖包。需要选择自己需要的选项。最后，等待项目生成完成即可。
目录结构
生成器会默认生成一些基础文件和目录，这样就不需要我们自己去手动创建项目结构了，目录结构如下：
-- -------------------- ---- ------- --- ------- - --- ----------- -- ---- ---- --- ------------- --- ---- - --- ------ - --- ------- - --- -------- - - --- ------- -- -- -- -- - - --- -------- -- ---- - --- ------- - --- --------- -- -- ---- -- - --- -------- -- ---- --- ------------- -- --------- --- ---------- -- --- --------- --- ---------------- -- --------- --------- --- ----------------- -- --------- ---- --- -------------- -- ------ ---- --- ---------------- -- -------- ---- --- ----------------- -- -------- --- ------------ -- ----------
使用
生成器生成后的项目结构还有一项最重要的配置文件 —— gulpfile.js。在这个文件中，我们需要进行一些针对项目的 Gulp 配置，如 SCSS 编译、JS 压缩、浏览器同步等。下面是一个基础的配置代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ---------------------
-- -- ---- --
----------------- ---------- -
------ ----
------------------------------
-------------
--------------------------------
---
-- -----------
------------------ ---------- -
--------------------------------- ----------
---
-- ---- ---
-------------------- -------- ----------在 gulpfile.js 中使用该代码，我们就可以对项目进行 SCSS 编译，并在项目运行时实现同步浏览器。
总结
在前端开发中，自动化工具是非常重要的，而 generator-gulp-static 为我们提供了一个快速生成 Gulp 项目结构的方案，大大提高了项目搭建的效率。在使用时，可以根据自己的需要进行配置，进而完成项目构建。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055bc281e8991b448d95c7