江湖險惡，我從來都不輕易留下我的姓名。

憑你的智慧，我唬得了你嗎？

Sails練習之一

| Comments

這一系列的文章, 出自於youtube上的Building a Sails Application教學.

這位仁兄的一系列教學文章都寫得非常好

他的網址在這邊

然後作者的github在這邊

這個版本是activityoverlord 1.0版本

在2015年, Irl nathan又出了activityoverlord 2.0版本, 主要是用新的Sails.js來實作

但我在練習Sails的時候, 我也是用新版0.11.2的版本, 所以在舊版到新版的改動我也會一併在練習中說明.

底下分別是他的各個教學章節, 我只是用文字來記錄我的學習過程

Building a Sails Application: Ep1 - Installing Sails and Create Initial Project

OK, 這個章節主要就是教安裝, 你要先安裝好npm, 接下來都好辦了

安裝sails

npm install -g sails

指令一下去就裝好了. -g是代表安裝到大家都可以存取到的目錄, npm的共用目錄是放在C:\Users\KennyTu\AppData\Roaming\npm

你可以用npm config get prefix來取得global的目錄

E:\sails_app>npm config get prefix

安裝好sails之後, 就可以用sails來create project

1
2

E:\sails_app>sails new activeityOverload --linker
info: Created a new Sails app `activeityOverload`!

--linker 的意思是在傳輸的過程啟動壓縮功能, 先讓資料變小, 然後傳輸, 節省網路開銷

但在0.10版本之後, sails就捨棄了linker, 要注意一下

詳情請參考這裡

接著啟動sails的serve來看結果

1
2

E:\sails_app>cd activeityOverload
E:\sails_app\activeityOverload>sails lift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

info: Starting app...

info:
info:                .-..-.
info:
info:    Sails              <|    .-..-.
info:    v0.11.2             |\
info:                       /|.\
info:                      / || \
info:                    ,'  |'  \
info:                 .-'.-==|/_--'
info:                 `--'-------'
info:    __---___--___---___--___---___--___
info:  ____---___--___---___--___---___--___-__
info:
info: Server lifted in `E:\sails_app\activeityOverload`
info: To see your app, visit http://localhost:1337
info: To shut down Sails, press <CTRL> + C at any time.

debug: --------------------------------------------------------
debug: :: Mon Nov 16 2015 15:24:06 GMT+0800 (台北標準時間)

debug: Environment : development
debug: Port        : 1337
debug: --------------------------------------------------------

看到以上的訊息之後, 就可以到瀏覽器中輸入 http://localhost:1337

就可以看到網頁啦!

好~ 第一課就是這樣囉, 結束

底下是第二課

Building a Sails Application: Ep2 - Creating a sign-up page, adding twitter bootstrap

進入到我們剛剛create的資料夾, 也就是activeityOverload, 我們會看到幾個資料夾和檔案

我們先專注在 config/routes.js

這個檔案決定使用者個要求如何導向我們設定的資源

詳細的介紹在這邊

主要是這個結構

1
2
3
4
5
6
7

module.exports.routes = {

  '/': {
    view: 'homepage'
  }

};

這個是說, 根目錄的頁面是呈現主要是view的hompage檔案

所以我們可以在views的目錄下找到homepage.ejs

EJS 是一個 client 端的 JavaScript template library，可以讓整個網頁程式碼結構更清楚、更整潔。有興趣的人可以參考這裡

現在呢, 我們要做以下事情

  1. 在views下create一個資料夾static
  2. 在static資料夾下新增index.ejs

在index.ejs新增

1

<h1> this is our homepage </h1>

回到config/routes.js 修改我們的首頁的目錄, 如下

1
2
3
4
5
6
7

module.exports.routes = {

  '/': {
    view: 'static/index'
  }

};

修改完成, 重新啟動sails,

sails lift

然後到瀏覽器(在這邊我用Firefox)就可以看到結果

在這邊用瀏覽器的觀看原始碼功能, 會看到source code多了很多東西出來

這是因為sails會用layout.ejs (在views底下)

重新幫我們產生出一個頁面出來

為了實驗一下layout.ejs, 我們來修改一下內容

在layout.ejs檔案中, 大約31行開始

1
2
3
4

<!--STYLES-->
<link rel="stylesheet" href="/styles/bootstrap.css">
<link rel="stylesheet" href="/styles/importer.css">
<!--STYLES END-->

上面那個bootstrap.css是我加的

目的是在於, 我們改用bootstrap.css來重新render(渲染)我們的html元素

也就是我們的index.ejs當中的h2的元素, 會被layout.ejs用bootstrap.css來重新渲染

底下是作法

  1. 去下載bootstrap, 最新的是bootstrap-3.3.5-dist.zip, 裡面有js, css, fonts
  2. 把css下面的bootstrap.css copy 到 sails app 目錄下的 activeityOverload\assets\styles
  3. 到layout.ejs去新增 styles, 就如同上面的layout.ejs的範例一樣

接著就是重新啟動sails, 你會看到首頁的字型變得不太一樣了

在這邊要提到一個目錄, 也就是assets, assets中文是資源的意思, 意思就是你create的任何files都可以放在這個資料夾啦!

當我們把files放到這個assets的目錄時, sails會在啟動的時候, 將底下的檔案copy到要發行的另外一個目錄, 在這邊是.tmp\public\styles

OK, 接下來作者就要再次修改主頁了, 修改之前, 他shows出了Gruntfile.js,

看到這邊出現了一個不熟悉的東西, 就上網google了一下

原來grunt是一個前端的建構工具, 他很像C的Make, Java的Ant, Ruby的Rake…

在前端和Node.js的開發環境中, 就是使用grunt來建置

Grunt是一個Task Runner，常用來執行 JS/CSS 打包壓縮、SASS/LESS/CoffeeScript 編譯、單元測試… 等工作，常被拿來當成前端開發自動化的引擎。

上網study了一下, 發現(2015年)出現了一個比Grunt更好用的Tool, 叫作Gulp

可能作者在出這個教學影片的時候, 還沒有Gulp, 所以就用了Grunt.

但既然已經有了Gulp, 我就來用Gulp來取代Grunt吧(以後啦!)

Sails的官網有教學, 如何把Grunt給DISABLE掉…請參考官方網站

一些gulp的教學文件我列在底下

Gulp 學習 1

Gulp 挑戰 Grunt，背後的哲學

Gulp, Grunt, Bower 以及 npm

How to disable Grunt in Sails.js

好, 現在繼續, 在這邊有個小插曲

作者忘記把JQuery以及一些相關的檔案加進來, 他額外寫了一個blog, 參考 Building a Sails Application: Ep2a - adding jquery, custom.less, minor footer changes

底下是步驟

  1. 先把JQuery下載下來, 我下載的是The compressed, production jQuery 2.1.4
  2. 把jquery-2.1.4.min.js 改名成jquery.js, 放到assets\js\dependencies底下
  3. 到task\底下,找到pipeline.js (新的Sails把Grunt關於inject的部份放到tasks裡面的pipeline.js), 參考這裡
  4. 本來我們要把jquery放到pipeline.js, 結果發現pipeline.js已經幫我們處理好了

從程式碼當中可以看到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [

  // Load sails.io before everything else
  'js/dependencies/sails.io.js',

  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/**/*.js',

  // All of the rest of your client-side js files
  // will be injected here in no particular order.
  'js/**/*.js',

  // Use the "exclude" operator to ignore files
  // '!js/ignore/these/files/*.js'
];

OK, 所以我們就不用修改, 把jquery放到正確的目錄就好

接著新增custom.less 參考下面的內容, 放到assets\styles中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

body {
  padding-top: 60px;
  padding-bottom: 40px;
}

.jumbotron {
  text-align: center;
}

.jumbotron h2 {
  font-size: 1.5em;
  letter-spacing: -1px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: normal;
  color: gray;
}

.container .gray{
  color: gray
}

.container{
  .footer{
    width: 25%;
  }
}

接著, 我們修改importer.less, 新增@import 'custom.less'; 如下表

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// For example:
//
// @import 'variables/colors.less';
// @import 'mixins/foo.less';
// @import 'mixins/bar.less';
// @import 'mixins/baz.less';
//
// @import 'styleguide.less';
// @import 'pages/login.less';
// @import 'pages/signup.less';
//
// etc.

@import 'custom.less';

PS: 我剛剛把custom.less放到assets\styles中的時候, layout.ejs好像就會幫我把custom.css自動加到STYLE裡面去.. 超強的… 還是我自己之前有改過我忘記了… XD

作者有在layout.ejs新增了一些屬性, navbar以及footer

相關程式碼我寫在下面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
          <a class="navbar-brand" href="/"> activityOverload</a>
      </div>
  </div>

  <%- body %>

  <div class="container">
    <hr>
    <footer class="footer pull-right">
      <div>
        <a href="http://sailsja.com">sails.js</a>
        <div>Tutorial by irl nathan...</div>
      </div>
    </footer>
  </div>

其中 <%- body %> 上面的code是navbar, 下面的是footer

好的, 總之大功告成啦

現在要回頭修改index.ejs了

內容如下

1
2
3
4
5
6
7
8
9
10

<div class="container">
  <div class="jumbotron">
    <h1>activityOverload</h1>

    <h2>...tracking app activity better than the NSA since 1899.</h2>
    <div class="text-center">
      <a href="/user/new" style="text-align:center" class="btn btn-lg btn-success">Sign up now!</a>
    </div>
  </div>
</div>

其中如果照著youtube上面寫的, button不會置中, 所以我就加了div class="text-center" 讓button置中, 我們使用的class是bootstrap的class, 請參考這裡

好, 以上就是教學影片的第一課以及第二課, 附上網址

  1. activityOverlord - An overview of the project
  2. Building a Sails Application: Ep1 - Installing Sails and Create Initial Project
  3. Building a Sails Application: Ep2a - Stuff I Forgot to Mention in Episode two…because I’m Old.
  4. Building a Sails Application: Ep2 - Creating a sign-up page, adding twitter bootstrap

Comments