使用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;

在多个任务的情况,可以使用seriesparallel,来分别指定顺序执行和并行,而且可以相互嵌套。下面是一个例子:

// 假设各个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可以会发现文件没有合并。

最后

由于本人能力有限,如有错误,欢迎指出;如果有什么建议,请不吝赐教。

相关推荐