5. 安裝/設定 gulp
現在我們已經安裝了許多的小工具,gulp 可以幫我們把這些小工具全部連結起來。Getting Started With Gulp 是一個非常好的教學,它可以教你如何安裝設定好 gulp。現在假設你是開啟命令提示字元,而且你還是在你的專案目錄底下(我的是 “C:sitestesttrunkwp-contentthemesvantage”)。
建立 package.json
在命令提示字元, 輸入:
npm init
這會建立 package.json
檔案來提供關於我們專案的資訊,而且也幫助管理我們的相依套件。它會問你名稱、版本與其它的問題,只要輸入相關的內容然後按Enter。
全局安裝 gulp
在命令提示字元, 輸入:
npm install -g gulp
這會安裝gulp,而且將來的專案再也不需要再安裝一次
本地安裝 gulp
在命令提示字元, 輸入:
npm install --save-dev gulp
都說Sass消除樣式表冗余、還有變數跟繼承的概念等等的,說有多好用就有多好用...
2. 安裝 SASS
在你開始使用 Sass 之前,你會需要安裝 Ruby ,最快的方式就是使用 Ruby 安裝套件來安裝在你的Windows電腦上,這是個快速安裝套件,只要點一下滑鼠就可以輕鬆的把 Ruby 快速安裝好。這個安裝套件也會安裝 Ruby 命令列介面應用程式來讓你使用Ruby函式庫。
vnsc5858威尼斯城官网,一旦你成功安裝了 Ruby,你可以開啟命令提示字元,輸入 ‘gem install sass’ :
npm install gulp-sass --save-dev
3. 安裝 Bower(非必需)
Bower 是一個套件管理程式,它可以幫助你從 git 上面下載像是 jQuery 或是 bootstrap 的許多套件,它也可以幫助你方便更新套件,你可以在http://bower.io/找到更多資訊
安裝 bower 相當簡單,只要開啟命令提示字元,然後輸入:
npm install -g bower
(請注意,在你安裝 bower 之前,你需要先安裝 node.js 與 git )
馬上來安裝步驟123....456
首先裝ruby然後裝sass
請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學
1.gulp
- 安裝node.js
- cli 輸入:
npm install -g gulp
- cd 到專案目錄後輸入:
npm init
- 然後再輸入:
npm install gulp -save-dev
- 裝 gulp-webserver 輸入:(文章爬一爬就發現的東西,就順手裝了)
npm install gulp-webserver -save-dev
- 在專案目錄底下增加一個gulpfile.js, 內容為:
var gulp = require('gulp');
var webserver = require('gulp-webserver');
gulp.task('webserver', function() {
gulp.src('./app/')
.pipe(webserver({
port:1234,
livereload: true,
directoryListing: false,
open: true,
fallback: 'index.html'
}));
});
gulp.task('default',['webserver']);
- 在cli 輸入 gulp 就會執行了,也會開啟瀏覽器
编辑:计算机教程 本文来源:設定 Bootstrap/SASS/Bower/gulp (Windows平台)
关键词: