自動化前端項目構建

時間  2019-11-12
標籤 自動化 前端 項目 構建 欄目 測試自動化 简体版
原文   原文鏈接

一、建立項目

無論作什麼開發，咱們都應該遵循必定的規範，建立項目一樣要注意文件夾的名字和結構。首先建立一個以下的基礎項目結構，暫且就將項目命名爲 auto-web：javascript

awesomes-cn

簡單解釋一下：css

  • /src 源文件所在地。開發過程當中的各類CSS和JS源文件都往這裏面放。
  • /dist 目標文件所在地。上線前經過工具生成的CSS和JS目標文件都輸出到這裏。
  • /images 圖片文件。
  • /vendor 第三方的 CSS、JS 和字體文件都存放到這裏。
  • /views HTML 視圖文件。

固然目前咱們是手動建立的，能夠設想一下，利用NodeJS，咱們是徹底能夠作到一條命令建立出這樣的文件夾結構。html

二、從 index.html 開始

首先咱們習慣性地建立一個 index.html 頁面前端

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello world</title> </head> <body> <h2>這是個人我的主頁</h2> </body> </html>

三、 Jade

什麼是 Jade ? - Jade 是 Node 的一個模板引擎，一句話就是讓咱們可以更快更簡便地寫HTML，你們能夠去 Jade 的 官網，因爲其主要是靠縮進來定義結構，因此通常都可以很快地學會這種寫法。java

相似的模板引擎在 Rails 裏面也有一個叫 Slim 。固然有不少開發者是不喜歡用相似的方式去開發，不過咱們這裏僅做爲一個示例，具體用仍是不用取決於你本身。node

OK，我們來將 index.html 換成 Jade。git

首先，我們在 /views 文件夾下建立一個 index.jade 文件，而後輸入下面的內容：程序員

doctype html html head meta(charset="utf-8") title Hello world body h2 這是個人我的主頁

這和上面的 index.html 是徹底同樣的。那麼咱們能夠對比一塊兒兩種寫法：github

awesomes-cn

在 HTML 代碼量越大的狀況下，Jade 的寫法就越有優點了。固然仍是那句話，用與不用都取決於你本身的愛好。web

OK，到此爲止，咱們已經寫好了一個 HTML的模板引擎。

直接點擊 index.jade 能運行嗎？確定是不行的。在這裏我得強調一下，咱們所要作的額外的工做，不是爲了運行項目，而是爲了開發項目。就比如咱們都要去北京，只不過你是走路去的，而我是坐飛機去的，目的一致，優化了開發流程而已。

明白了這一點，咱們就知道，應該將 index.jade 轉換成 index.html 了。

該如何轉換呢？這必然得用上工具了，我們須要一門後臺語言的命令行工具，Ruby？Python？ 對，他們都能完成這份工做。但咱們是前端，天然最佳選擇就是 NodeJS 了。

四、該 NodeJS 出場了

相信你們也都對 NodeJS 有過必定的瞭解，我們先不要求精通，只要知道怎麼使用便可。

首先我們去 NPM 中查找要用到的 jade 包，找到 mmand Line 命令行，首先按照文檔說的安裝（必要時前面加上 sudo）：

$ npm install jade -g

這裏的 npm 是 Node 的一個包管理器，也就是經過相似上面的命令去安裝程序中須要用到的包。

而後經過 jade --help 能夠看到如何將一個 Jade 文件轉換成 HTML：

jade views/index.jade -o ./

這樣就能在咱們的項目根目錄下生成一個 index.html 了，並且它的內容是壓縮過的。

好像還不錯，我們能夠書寫 *.jade 文件，而後經過命令生成 *.html 。

五、母版頁

網站不可能只有一個頁面，可是咱們確定會有公共的頭部和底部，不可能每一個頁面都去寫一遍。

有兩種方式達到這種目的，一種是母版頁，經過佔位符和填坑的方式實現，也就是接下來咱們要講的。還有一種是在每一個頁面中去引入公共部分。固然得根據本身的須要來決定了。

首先咱們在 views/ 下建立一個 layouts/layout.jade 母版頁：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
  body
    header
      | 這是頭部

    block con

    footer
      | 這是底部

注意這裏的 block con 是關鍵，意思是建立一個標識爲 con 的坑，等着其它具體頁面來填內容。

那麼該怎麼填內容呢？咱們來改寫views/index.jade 文件

extends ./layouts/layout.jade

block con
  div 這是主頁

首先是經過 extends 引入模板文件，而後再在 block con 下面去填充首頁的具體內容。

這樣，之後添加任何新頁面均可以經過上面的格式來了，不用去管公共部分。

六、該寫 CSS 了

頁面沒有樣式是不行的，那麼咱們接下來就來寫樣式文件。不過咱們這裏但願用 Sass 來寫。

Sass 是一個 CSS 預處理器，簡單點說就是用另一種方式去書寫 CSS（增長了包括變量、嵌套等等新寫法），最終一樣經過工具轉換成原始的 CSS文件。不瞭解的同窗能夠大體看一下 官網，也都是很容易學會的。

好了，我們在 /src/sass 中建立一個 main.scss 文件：

body{ background-color: #EEE; h2{color: Red} }

做爲演示，我們這隻用到了其中的嵌套規則。

上面說到，*.scss 也是不能直接引用的，須要先轉換成 *.css。怎麼轉換呢？首先仍是安裝 Sass：

npm install sass -g

而後執行下面的命令將 /src/main.scss 輸出到 /dist/css/main.css 中

sass src/sass/main.scss dist/css/main.css

你們能夠看到，在 /dist/css/ 中實際上生成了 main.css 和 main.css.map 兩個文件，固然我們能夠不用管 main.css.map 這個文件，由於我也沒去看到底這個文件有什麼做用。

OK，大功告成。接下來咱們就在 views/layouts/layout.jade 中將 main.css 引入。

修改 views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
  body
    header
      | 這是頭部

    block con

    footer
      | 這是底部

而後從新執行

jade views/index.jade -o ./

打開新生成的 index.html 文件，是否是應用上了咱們的樣式了？

七、該寫 JavaScript 了

一樣滴，JavaScript 也有本身的預處理，那就是 CoffeeScript 了。這樣你就能夠寫 JavaScript 寫得很爽了。不瞭解的同窗能夠看看 教程 很簡單。

相似上面的 CSS，首先在 src/coffee 下建立一個 main.coffee 文件，而後寫上測試代碼：

hello = ()->
  console.log("your coffee is work")
hello()

而後

npm install -g coffee-script

接着編譯 src/*.coffee 到 dist/js/*.js：

coffee -c -o  src/coffee/main.coffee dist/js/

這裏在測試中好像是不能輸出來的，不過文檔是這樣寫的，先不用管這個，暫時能夠直接將其編譯到當前目錄下，而後手動複製到 dist/js/*.js 下面：

coffee -c   src/coffee/

接下來咱們就在 views/layouts/layout.jade 中將 main.js 引入。 修改views/layouts/layout.jade：

doctype html
html
  head
    meta(charset="utf-8")
    title Hello world 
    link(href="dist/css/main.css" rel="stylesheet") 
    script(src="dist/js/main.js")
  body
    header
      | 這是頭部

    block con

    footer
      | 這是底部

而後從新執行

jade views/index.jade -o ./

打開新生成的 index.html 文件，F12看看是否是輸出了 your coffee is work。

八、該創做了

估計不少同窗都想利用 Github 我的主頁（下面會講到）來寫博客，若是是有後臺程序，那麼通常是將博客內容存到數據庫中，而後在一個指定的頁面中讀取顯示出來。

那麼全靜態站點該如何作呢？咱們沒有數據庫。的確，可是咱們仍然能夠把博客內容剝離出來，放到一個單獨的文件中，而後經過命令去生成單個的博客頁面。

這裏咱們使用 Markdown 格式來寫內容，咱們新建一個文件夾 views/blog/ 文件夾用於存放全部博客文件。首先咱們新建一個 views/blog/index.jade 的頁面用於顯示文章：

extends ../layouts/layout.jade

block con
  article
    include:marked hello.md

注意這裏是經過 include:marked 指令來將 Markdown 文件引進來並解析成 HTML，這是 Jade 爲咱們提供的功能。

而後建立一個 hello.md 的文章：

### 這是標題
這是內容
[連接文字](連接地址)

最後就會生成一個 blog/index.html。

這裏咱們是把 include:marked hello.md 寫死了，事實上咱們是要實如今 views/blog/ 下添加不少的 Markdown 格式的博客內容文件，而後執行 gulp 便可在 blog/下面生成對應的 HTML 文件。

你們能夠思考一下這個問題，我這裏就不作了，也許會在後面的文章中來進行補充。

到此爲止，整個項目已經初具成效了。

那麼咱們每次修改內容的時候，都得去執行相應的命令，是否是有點繁瑣呢？程序員必定要懶，能程序作的就別本身手動去作。那麼有這種工具能夠幫咱們完成這一系列動做嗎？

九、自動化構建

所謂的自動化構建就是將多個開發中的操做整理到一塊兒，簡化咱們的整個開發過程。簡單點說就是配置一系列的命令語句，而後一行命令就搞定全部的CSS、JavaScript等處理工做。

固然構建工具的選擇仍是蠻多的（查看 完整列表）。這裏咱們選擇的是 gulp，由於使用和配置都比較簡單。

首先是安裝 gulp

npm install --global gulp

而後在你的項目根目錄下建立一個 gulpfile.js 文件，內容以下：

var gulp = require('gulp'); gulp.task('default', function() { // place code for your default task here });

而後執行

gulp

能夠看到默認的任務執行了，只是沒有作任何工做：

[14:18:31] Starting 'default'... [14:18:31] Finished 'default' after 79 μs

下面咱們就來配置 gulp 來完成咱們的自動化任務，這裏我們先以編譯 Sass 文件做爲示例。

首先得引入 Sass 的處理包，注意這裏再也不是 sass ，而是 gulp 的 Sass 插件，能夠在 npm 上面找到（點擊這裏）而後咱們能夠看看它的大體用法。

首先是引入：

var sass = require('gulp-sass');

而後是建立一個任務：

gulp.task('styles',function(){ gulp.src('./src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./dist/css')) })

這裏咱們經過 src 指定 *.scss 源文件的位置，而後傳入 pipe（自動化流程中的處理管道）最後經過 dest 指定輸出路徑。整個過程實際上是很好理解的。

完了你的 gulpfile.js 文件就會是這個樣子：

var gulp = require('gulp'), sass = require('gulp-sass'); gulp.task('styles',function(){ gulp.src('./src/sass/*.scss') .pipe(sass()) .pipe(gulp.dest('./dist/css')) })

接下來一樣須要安裝 gulp-sass

npm install -g gulp-sass

最後，咱們執行

gulp

能夠看到，Sass 文件已經編譯成功了。

對於 coffee 和 jade 文件，咱們一樣建立各自的任務和處理管道，這裏就不重複說了，能夠直接看代碼。

這裏還有一個 clean 任務，用於每次新編譯的時候把老文件清空掉

gulp.task('clean',function(cb){ del(['./dist'],cb) })

由於執行 gulp 命令默認是取的 default 任務，因此咱們須要建立該任務，並把其它任務都給加進去

gulp.task('default',['clean'],function(){ gulp.start('styles','scripts','templates'); })

能夠看到這裏是保證在 clean 任執行完成後再去執行咱們的 'styles','scripts','templates'任務。

在實際的開發過程當中，無論咱們修改什麼文件，只須要 gulp 一下便可，方便了不少。可是仍然每次修改都得執行一下。可不可讓 gulp 來監聽咱們的文件變化，而後自動從新執行編譯任務呢？

答案是能夠的。只須要將這些任務加入監控 watch 就好了：

gulp.task('watch',function(){ gulp.watch('./src/sass/*.scss',['styles']); gulp.watch('./src/coffee/*.coffee',['scripts']); gulp.watch('./views/*.jade',['templates']); })

而後執行

gulp watch

這樣，gulp 就開始監聽文件了，無論咱們作了什麼修改，都不用再次執行 gulp 了。

源碼 中我用到了更多的包（壓縮、合併、重命名等等）你們能夠了解一下，不懂的能夠去 npm 上查一下用法文檔。

十、開發環境

若是要是在別人的環境中運行該項目，那麼咱們以前安裝的包都得從新安裝一遍，是否是很麻煩。別怕，咱們有 package.json，用來管理咱們這些包的依賴，換了環境只須要執行一下 npm install 便可將咱們以前的包都給安裝上了，至關省事。

須要手動建立 package.json 嗎？NO，只需執行

npm init

接下來咱們就能夠按照提示建立本身的 package.json 了。 裏面包含了該項目的一些信息，我們找到 dependencies 這一行，這即是該項目要用到的包。正常狀況下應該是這種格式：

"dependencies": { "gulp": "^3.9.0", "gulp-sass": "~2.0.4", .... }

可是很遺憾，裏面什麼都沒有，這意味着咱們必須一個個手動往裏面添加咱們上面用到的包了。

心好累...

難道就不能自動給咱們加上去嗎？不能，不過咱們若是在開始安裝每一個包的時候在命令結尾加上 -save 參數，那麼後面這些依賴即可以自動加到 dependencies 下了，如：

npm install coffee-script -save

因此下次開發的時候，別忘了在安裝包的時候加上這個參數。

十一、版本控制

如今項目已經完成了，咱們應該將它歸入版本控制了。什麼叫版本控制呢？通俗點說就是充分管理你的代碼日誌，你對代碼作的任何增刪改，只要你提交過，就會記錄下來，並且能夠隨時回退到以前的任何狀態，從而保證整個開發過程不會斷層。

目前咱們基本上都會使用Git來完成版本控制，Git只是一種協議，而具體則有Github、Bitbucket、Gitlab之類的實現。而 Github 則是開源項目的不二選擇。

一、首先咱們在項目根目錄下執行
git init

這裏是初始化，會建立一個 .git 文件夾，裏面包含了全部跟版本控制相關的數據。因此，若是你想把該項目和Git斷開，直接刪除該文件夾便可。

二、添加一個 README.md （可選）用於描述項目
touch README.md

注意這裏是 Markdown 格式的。

三、忽略某些文件

在提交代碼以前，咱們須要將某些文件排除在外，好比由 npm 產生的 node_modules 文件夾，這是開發環境下用到的，能夠經過 npm install 在新環境下安裝依賴。因此理應不歸入版本管理，還有緩存之類的都應該排除掉。

那麼咱們就建立一個名爲 .gitignore 的文件，內容就以下：

.DS_Store
node_modules
.sass-cache

上面只是一個大體的內容，實際開發的時候你得根據本身的需求去忽略某些文件。

四、提交代碼到本地
git add . git commit -m "init project"

注意，這裏僅僅是將代碼提交到了本地。

五、提交到 Github

首先咱們在Github上建立一個項目 auto-web

awesomes-cn

Create repository 到下一個頁面上，複製那句

git remote add origin git@github.com:awesomes-cn/auto-web.git

（這裏是個人，你得複製你本身的） 而後回到項目根目錄執行該命令。

最後執行提交

git push -u origin master

去你的 Github 上，能夠看到該項目的全部文件已經傳上去了，而那些忽略掉的文件則沒有上去。

感興趣的同窗能夠 cat .git/config 一下：

[core] repositoryformatversion = 0 filemode = true bare = false logallrefupdates = true [remote "origin"] url = git@github.com:awesomes-cn/auto-web.git fetch = +refs/heads/*:refs/remotes/origin/* [branch "master"] remote = origin merge = refs/heads/master

這就是本地與遠程鏈接的一個配置，由 remote 和 branch 組成，即經過【遠端源+分支】來精肯定位到最終提交的地址。若是咱們直接修改這個文件，也會和用命令同樣達到相同的配置效果。

起初是沒有這些內容的，當咱們執行 git remote add origin ... 時則添加了

[remote "origin"] url = git@github.com:awesomes-cn/auto-web.git fetch = +refs/heads/*:refs/remotes/origin/*

而 git push -u origin master 則指定了

[branch "master"] remote = origin merge = refs/heads/master

因此若是隻有 master 分支，後面的提交就直接能夠 git push 了。

若是這是你在公司作的，回到家了想繼續開發，只需

git clone git@github.com:awesomes-cn/auto-web.git

而後

cd auto-web npm install gulp watch

開發環境就緒，繼續吧....

免費我的主頁

若是你想把該項目做爲一個我的主頁項目，也就是直接瀏覽靜態頁面。Github 給每一個用戶提供了一個特殊的庫，那就是 <github用戶名>.github.io ，由於這個項目是能夠直接在瀏覽器中瀏覽的。通常的前端庫都會將文檔頁面或者演示頁面放到該主頁上，這樣就不必本身搭服務器來作了。

那麼很簡單，只須要把該項目的名字改爲 <github用戶名>.github.io 好比個人是 awesomes-cn.github.io。

而後就能夠在瀏覽器中經過 http://<github用戶名>.github.io 訪問了。

如此，一個我的主頁就誕生了，能夠用來作我的簡歷和博客，徹底不用服務器和數據庫參與，並且不須要花一分錢的費用。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程