vue-gulp-sass-browserify-boilerplate

Logos

一个使用 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.css
minfiy-css 压缩 style.css 为 style.min.css
bundle 使用 Browserify 将所有 vue 相关的文件整合打包为 bundle.js
uglify-js 压缩 bundle.js 为 bundle.min.js
watch 监控文件改动，并自动执行对应任务，如刷新浏览器
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 。

Lisence

MIT

第 1 条附言 2015-10-28 18:04:57 +08:00

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

4 条回复 2015-11-29 11:06:25 +08:00

banri

2015-10-28 17:35:14 +08:00

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')