简介
gulpstart 是一个通过 Gulp 构建 JavaScript/Web 前端工程的简单的 npm 包。使用 gulpstart，我们可以快速创建符合前端项目的目录结构以及配置 Gulp 任务。在使用该包之前，需要确保已经安装了 Node.js。
安装 gulpstart
打开终端，输入以下命令进行安装：
npm install -g gulpstart
创建项目
在终端中运行以下命令，创建一个新的 gulpstart 项目：
gulpstart create my-project
在该命令中，my-project 是我们要创建的项目名称。
该命令将在当前目录下创建 my-project 目录，其中包括如下结构：
-- -------------------- ---- ------- ---------- --- --- - --- --- - - --- -------- - --- ---------- - --- -- - --- ------- --- ----- - --- --- - - --- -------- - --- ---------- - --- -- - --- ------- --- ------------ --- ----------- --- ------------ --- ---------
其中：
- app 目录是我们的源代码目录，包括 CSS 样式、JavaScript 脚本以及 HTML 页面等等。
- build 目录是 Gulp 任务生成的目标代码目录，包括合并压缩后的 CSS、JavaScript 以及 HTML 文件等等。
- node_modules 是我们使用的 npm 包集合。
- gulpfile.js 是 gulpstart 自动生成的 Gulp 任务配置文件，其中包括了许多默认任务。
- package.json 是我们的项目配置文件，其中包括了我们所依赖的 npm 包。
- README.md 是我们项目的说明文档。
配置 Gulp 任务
在 gulpfile.js 文件中，gulpstart 已经预先配置了默认的任务，包括：编译 SCSS、合并压缩 JavaScript、压缩 HTML 上线代码等等。可以通过修改该文件中的内容，以扩展和修改任务。
以下是一个简单的示例：
gulp.task('prefix', function () {
return gulp.src('./app/css/main.css')
.pipe(autoprefixer({
cascade: false
}))
.pipe(gulp.dest('./build/css'));
});在该示例中，我们定义了名为 prefix 的任务，任务功能是自动添加 CSS 厂商前缀。
接下来，运行以下命令，执行该任务：
gulp prefix
完成之后，会在 ./bulid/css/main.css 文件中输出厂商前缀已添加的 CSS 文件。
后续学习
gulpstart 是一个简单易用的前端项目构建工具，它可以帮助我们最大限度地降低项目配置的复杂度，提高我们的工作效率。如果需要进一步学习 Gulp 相关内容，建议可以查阅官方文档进行深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056c4781e8991b448e5cd0