如何创建Bootstrap Sass项目

时间:2016-12-15 23:37:36

标签: node.js twitter-bootstrap twitter-bootstrap-3 sass

我知道这可能是这个问题的多个答案,但我知道如何使用Bootstrap和Sass快速设置项目。

我从未使用过node,npm,grunt或bower,我已经安装了所有内容,但我无法找到一个很好的教程:

  • 设置项目结构
  • 自动编译保存
  • 的sass文件
  • (也许)在Chrome中重新加载?

2 个答案:

答案 0 :(得分:0)

答案 1 :(得分:0)

我建议不要在第一个项目中使用任何样板文件,因为你想进入" guts"一旦你熟悉基础知识,那么你可以尝试样板,看看他们能为你做些什么。

从头开始设置项目所需的工具很少包括:Node's npmBowerGulp (for example)

安装完毕后,您可以深入了解第一个项目。

1)Initialize your npm project

2)Pull the packages with Bower (Bootstrap scss for starters)

2a)Pull the Specific Bootstrap 3 SCSS port

3)Configure Basic Gulp-scss config for your SCSS needs.

Bower背后的基本思想是你在bower_components文件夹中有未经修改的插件/第三方js / css源,你可以使用这些文件来编译生产就绪文件(js / css)。这意味着你的bower_components文件夹是" src"文件夹,你必须添加" dist"或可分发的文件。 Gulp帮助这一部分。

对于项目结构,further readings以及改进gulp任务。

一旦你有了基本的工作项目,就可以尝试扩展你的gulp-config,就像你提到Browser Sync和其他人一样。

我确实编了一个"一般任务"我从项目到项目使用的gulp文件。您可以使用look here并在发现它适合时使用它。

希望它有所帮助。