使用gulp和scss構建樣式庫

目的

爲了更好地複用樣式，以及出於練習gulp、scss和學習mocha的目的，我在嘗試使用gulp、scss構建一個用於pc端的樣式庫，使用mocha進行瀏覽器端的測試。爲了方便起見，腳本沒有使用純javascript編寫，而是選擇了jquery。目前，基本的框架已經搭好，正在完善樣式中。

目錄結構

• lib --> 源代碼庫

  • scss --> scss代碼庫

    • mixins --> 共用mixins
    • components --> 組件
    • layouts --> 佈局
    • text --> 文字和文本
    • utilities --> 實用的scss
    • state --> 狀態
    • variables --> 變量
  • js --> 組件使用的js
• vendor --> 第三方資源(js和css)
• dist --> 打包後的文件(js和css)
• examples --> 例子(ejs)
• test --> 單元測試

css命名方式

樣式庫使用前綴+主體+表現的形式命名，好比.c-btn-color--primary。前端的部分使用單橫杆鏈接，狀態使用雙橫杆形式。命名有些醜陋，這是參考命名空間和BEM後的一種嘗試。
前綴主要區分各自的做用，它們包括：

• c ---> 組件類
• u ---> 實用類
• l ---> 佈局類
• is ---> 狀態類（顯示、隱藏等）
• t ---> 文字或排版類
• js ---> js鉤子（表示使用js）

其它對於項目的詳情，請點擊這裏

遇到的問題

因爲第一次使用gulp，不可避免地遇到了一些問題，記錄以下：

gulp4的使用

gulp的中文文檔是gulp3的，安裝gulp3的方法使用，會發現gulp沒有找到任務的狀況。在gulp4，建立一個任務應該是：

function task() {
    // 須要返回stream、promise或者其餘類型（詳見gulp4文檔） 
    return gulp.src(...).pipe(...);
}
// 導出default任務
exports.default = task;

在多個任務的狀況，能夠使用series和parallel，來分別指定順序執行和並行，並且能夠相互嵌套。下面是一個例子：

// 假設各個task已經定義。
exports.default = series(
    task1,
    parallel(task2, task3)
);

這樣，導出的default任務就是先執行task1，而後task2和task3同時執行。

gulp-order的使用

我在項目中使用了gulp-concat用於拼接js文件，這時，遇到的問題是怎麼肯定文件的順序，有的文件有順序要求。這是一個例子：

function task() {
    return gulp.src("js/*.js")
        .pipe(order([
            "js/component.js",
            "!js/index.js",
            "js/index.js"
        ], {base: "./"}))
        .pipe(concat("main.js"))
        .pipe(dest("dist"));
}

上面的任務表示先合併component.js而後合併不是index.js的文件，最後合併index.js，至於base用於設置基本路徑，不使用base能夠會發現文件沒有合併。

最後

因爲本人能力有限，若有錯誤，歡迎指出；若是有什麼建議，請不吝賜教。