推荐一个基于 Vue.js 的 Seed-Project

# vue-gulp-sass-browserify-boilerplate

![Logos][1]

一个使用 Vue.js ， Gulp ， Sass ， Browserify 的前端模板。

## 如何使用

1. 安装 [Sass][2].
2. 安装 [Node.js][3].
3. 为你的浏览器安装 [Livereload][4] 插件。
4. 在命令行中运行 `npm install`，安装 node 模块
5. 在命令行中运行 `bower install`，安装 bower 组件
6. 在命令行中运行 `gulp` ，搞定了~

## 文件树结构

```
app/ --> Source files for the application.

css/ --> Stylesheets folder.
src/ --> Sass files.
main.scss --> Primary Sass file.
dist/
style.css --> Css file compiled from Sass.

img/ --> Images.
logo.png --> Logo of Vue.js, used for favicon.

js/ --> Javascripts folder.
src/ --> Source files for the MVVM part (Vue.js).
components/ --> Components.
view1/ --> The view1 component template and logic.
template.html --> The partial template.
index.js --> The controller and model logic.
view2/ --> The view2 component template and logic.
template.html --> The partial template.
index.js --> The controller and model logic.
directives/ --> Custom directives.
my-frist-directive/ --> A demo directive.
index.js --> Logic for the directive.
filters/ --> Custom filters.
my-first-filter/ --> A demo filter.
index.js --> Logic for the filter.
app.html --> Templates for the main application.
app.js --> Main appliaction module.
main.js --> Entry point file for browserify. Initialize Vue instance, routes, custom directives and filters.
dist/
bundle.js --> Generated by browserify from the files in js/src folder.
bundle.min.js --> The uglified version of bundle.js.

index.html --> App layout file.

.bowerrc
.gitignore
bower.json
gulpfile.js --> Gulp tasks.
logos.png
package.json
README.md
```

## Gulp 任务

1. `compile-css` 将 Sass 编译为 style.css
2. `minfiy-css` 压缩 style.css 为 style.min.css
3. `bundle` 使用 Browserify 将所有 vue 相关的文件整合打包为 bundle.js
4. `uglify-js` 压缩 bundle.js 为 bundle.min.js
5. `watch` 监控文件改动，并自动执行对应任务，如刷新浏览器
6. `default` 运行 `compile-sass`，`bundle` 和 `watch`任务。
7. `compress` 运行 `minify-css` 和 `uglify-js`任务。

## FAQ
1. 为什么使用 gulp-ruby-sass 而不使用依赖更少的 gulp-sass ？

Gulp-sass 的安装依赖于 node-gyp ，而在 Windows 系统中想让 node-gyp 正常工作要花费很多精力。 Gulp-ruby-sass 不依赖于 node-gyp 而依赖于 Sass ， Sass 又依赖于 Ruby ，不过在 Windows 上安装 Sass 和 Ruby 还是很简单的。

如果你是在 OSX 或 Linux 下开发，那么你可以选择使用 gulp-sass 。

2. 为什么使用 live-reload 而不使用不需要安装插件的 browserSync?

原因同问题 1 。 BrowserSync 依赖于 node-gyp 。

## Lisence
[MIT][5]

[1]: https://raw.githubusercontent.com/panteng/vue-gulp-sass-browserify-boilerplate/master/logos.png
[2]: http://sass-lang.com/install
[3]: https://nodejs.org/en/download/
[4]: http://livereload.com/extensions/
[5]: http://opensource.org/licenses/mit-license.html