前端开发越来越受到重视，node.js 的流行也让我们可以使用更加高效便捷的方式来构建前端项目。npm 作为 node.js 的包管理工具，对于前端开发来说是一个非常重要的工具。generator-s-webapp 是一个 npm 包，他可以帮助我们快速的搭建一个现代化的 web 应用程序。
什么是 generator-s-webapp
在介绍 generator-s-webapp 前，需要先了解 yeoman。yeoman 是一个脚手架工具，可以通过命令行快速生成项目的基础代码结构。generator-s-webapp 就是使用 yeoman 搭建的一个现代化网页应用程序的基础代码结构。generator-s-webapp 包含了现代 web 应用程序所需的很多依赖项和配置，比如自动刷新、ES6、静态资源管理、压缩等。我们可以通过使用 generator-s-webapp 快速的搭建一个现代化的 web 应用程序，而不需要编写大量的重复的配置代码。
安装 generator-s-webapp
首先，你需要全局安装 yeoman 和 generator-s-webapp：
npm install -g yo generator-s-webapp
创建 web 应用程序
现在，你可以通过以下命令来创建一个新的 web 应用程序：
mkdir myapp cd myapp yo s-webapp
执行上面的命令后，会有一些交互式的提示，如项目名称、描述、作者等信息。在完成这些设置之后，generator-s-webapp 会自动的帮助你生成一个现代化的 web 应用程序。你的 web 应用程序的结构是这样的：
-- -------------------- ---- ------- --- --------- --- --- -- ------ - --- ------ - --- ---------- - --- ------- - --- ------ - --- ----- --- ---- -- -------- - --- ------ - --- ---------- - --- ------- - --- ------ --- ----------- -- ---- ---- --- ------------ --- ------------ --- ---- -- ------
现在，你的 web 应用程序已经 ready 了。接下来，让我们来详细的了解一些配置和使用方法。
gulpfile.js 配置
generator-s-webapp 使用了 gulp 来构建和编译项目。在项目中，你可以通过修改 gulpfile.js 配置文件来实现不同的构建方案。下面是一些常用的构建任务：
build
gulp build
该任务用来生成 final project，在 gulpfile.js 脚本里面，默认会将 app 目录里面的文件编译到 dist 目录里面。
serve
gulp serve
该任务用来启动一个本地服务器，是可以通过 http://localhost:9000 来访问的。为了了解更多关于服务器设置任务的工作原理，请参阅 gulp-connect 插件文档。
serve:dist
gulp serve:dist
该任务用来启动一个本地服务器，是可以通过 http://localhost:9000 来访问 dist 目录下的文件。为了了解更多关于服务器设置任务的工作原理，请参阅 gulp-connect 插件文档。
wiredep
gulp wiredep
该任务会自动将 Bower 库文件添加到你的 index.html 文件里面去。你可以在 gulpfile.js 里面进行相关配置。
静态资源
generator-s-webapp 的项目结构，已经预设了呈现现代网络应用程序所需的许多依赖项和文件结构。生成的应用程序具有以下结构：
-- -------------------- ---- -------
----
--- ----------
--- -----------
--- --------------------
--- ----------
--- ----------
--- ---------
-
--- -------
- --- -----------
- --- --------------------
- --- ---
-
--- ------
- --- --------------------------------
- --- --------------------------------
- --- --------------------------------
- --- ---
--- --------
--- -------
--- -------
--- ------------
--- ---------
--- ------------
--- ---
--- ---在 app 目录下，你可以看到一些常见的静态资源，比如 favicon.ico、apple-touch-icon.png、robots.txt 等。在 images 目录下你可以放置图片资源，在 fonts 目录下你可以放置字体资源，在 scripts 目录下你可以放置 JavaScript 代码资源。
组织模块化代码
在前端开发中，模块化的使用非常广泛。为了方便模块化的使用，generator-s-webapp 内置了 Browserify 这一前端模块化组合工具。Browserify 可以将服务器端的 CommonJS 格式转换为前端代码中可以使用的格式。比如，你将以下代码写入 app/scripts/app.js 中：
'use strict';
var $ = require('jquery');
$(function(){
$('body').html('Hello Yeoman!');
});在默认的 setup 中，generator-s-webapp 会使用 gulp-browserify 去完成 Browserify 的转化处理。app/scripts/app.js 文件会被自动添加到 scripts/main.js 这个文件。main.js 是生成的 HTML 页面引用的入口脚本，它被设置为处理所有 JavaScript 文件。这意味着在 index.html 文件中引用这个 main.js 文件，您的应用将包含文件夹下的所有 JavaScript 文件。
总结
generator-s-webapp 是一个非常好的 npm 包，它可以帮助我们快速的搭建一个现代化的 web 应用程序。在使用 generator-s-webapp 的过程中，我们可以更加专注于业务逻辑的部分，而减少了很多底层的配置代码。我们可以学习到 npm 包的使用方式，以及如何在前端项目中使用 gulp 来构建和编译项目。同时，我们也可以通过这个包掌握和熟悉一些前端开发的基本配置和规范。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ab281e8991b448d8491