vue-gulp-sass-browserify-boilerplate
一个使用 Vue.js ， Gulp ， Sass ， Browserify 的前端模板。
如何使用
- 安装 Sass.
- 安装 Node.js.
- 为你的浏览器安装 Livereload 插件。
- 在命令行中运行
npm install，安装 node 模块 - 在命令行中运行
bower install，安装 bower 组件 - 在命令行中运行
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 任务
compile-css将 Sass 编译为 style.cssminfiy-css压缩 style.css 为 style.min.cssbundle使用 Browserify 将所有 vue 相关的文件整合打包为 bundle.jsuglify-js压缩 bundle.js 为 bundle.min.jswatch监控文件改动，并自动执行对应任务，如刷新浏览器default运行compile-sass，bundle和watch任务。compress运行minify-css和uglify-js任务。
FAQ
为什么使用 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 。
为什么使用 live-reload 而不使用不需要安装插件的 browserSync?
原因同问题 1 。 BrowserSync 依赖于 node-gyp 。
Select Language