一个使用 Vue.js , Gulp , Sass , Browserify 的前端模板。
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
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
任务。为什么使用 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 。
1
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') |
2
Kamato OP |
3
Kamato OP |
4
NemoAlex 2015-11-29 11:06:25 +08:00
谢谢分享。
最近也在整理一个类似的东西,区别是只用 NPM ,不用 bower 和 browserify ,不考虑使用 Windows 的开发者。 过两天发布。 |