設定 Bootstrap/SASS/Bower/gulp (Windows平台)

时间:2019-06-22 05:12来源:计算机教程
5. 安裝/設定 gulp 現在我們已經安裝了許多的小工具,gulp可以幫我們把這些小工具全部連結起來。Getting Started With Gulp是一個非常好的教學,它可以教你如何安裝設定好gulp。現在假設你是

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’ :

vnsc5858威尼斯城官网 1

npm install gulp-sass --save-dev

3. 安裝 Bower(非必需)

Bower 是一個套件管理程式,它可以幫助你從 git 上面下載像是 jQuery 或是 bootstrap 的許多套件,它也可以幫助你方便更新套件,你可以在http://bower.io/找到更多資訊

安裝 bower 相當簡單,只要開啟命令提示字元,然後輸入:
npm install -g bower
(請注意,在你安裝 bower 之前,你需要先安裝 node.js 與 git )

vnsc5858威尼斯城官网 2

馬上來安裝步驟123....456
首先裝ruby然後裝sass

請注意:在進行以下步驟前,你會需要先安裝git,可以參考這篇 git安裝教學

1.gulp

  1. 安裝node.js
  2. cli 輸入:

npm install -g gulp

  1. cd 到專案目錄後輸入:

npm init

  1. 然後再輸入:

npm install gulp -save-dev

  1. 裝 gulp-webserver 輸入:(文章爬一爬就發現的東西,就順手裝了)

npm install gulp-webserver -save-dev

  1. 在專案目錄底下增加一個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']);

  1. 在cli 輸入 gulp 就會執行了,也會開啟瀏覽器

编辑:计算机教程 本文来源:設定 Bootstrap/SASS/Bower/gulp (Windows平台)

关键词: