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

[Kamato]

vue-gulp-sass-browserify-boilerplate

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

如何使用

1. 安装 Sass.
2. 安装 Node.js.
3. 为你的浏览器安装 Livereload 插件。
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 。

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

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

Lisence

MIT

Github 仓库： https://github.com/panteng/vue-gulp-sass-browserify-boilerplate

[banri]

Windows 下编译 Sass 是有坑的，需要以下设置：

进入 Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.15\lib\sass ，打开 engine.rb 文件，找到各种 require... 在它们的下方添加一行：
Encoding.default_external = Encoding.find('utf-8')

[Kamato]

@banri 是编码的问题吗？我一般会在每个.scss 文件中添加一行 @charset "utf-8";，目前没遇到过你说的坑。

[Kamato]

项目 Github 主页： https://github.com/panteng/vue-gulp-sass-browserify-boilerplate

[NemoAlex]

谢谢分享。
最近也在整理一个类似的东西，区别是只用 NPM ，不用 bower 和 browserify ，不考虑使用 Windows 的开发者。
过两天发布。