目录结构和模块的一些思考

[zhouwenbin]

以往的目录结构

�刚开始做项目的时候，只对css做了模块化，使用了sass，然后目录结构是这样的

|-img
|-js
|-css
  |-pages
    page1.css
    page2.css
|-scss
  |-utils
    _function.scss             函数
    _mixin.scss                混合
    _placeholders.scss         占位符
    _variables.scss            变量
  |-base
    _reset.scss                样式表重置
    _base.scss                 基础样式
    _help.scss                 辅助样式
  |-components                组件
    _btn.sccc
    _icon.scss
  |-modules                     模块
    _module1.scss
    _module2.scss
  |-layout
    _footer.scss               尾部
    _header.scss               头部
    _layout.scss               布局
    _nav.scss                  导航
  |-vendors                      库
  |-pages                        页面
    page1.scss
    page2.scss
index1.html
index2.html

后面页面多了，经常需要改头尾，也对html做了模块，引入了slim，目录结构是这样的

|-img
|-js
|-css
  |-pages
    page1.css
    page2.css
|-scss
  |-utils
    _function.scss             函数
    _mixin.scss                混合
    _placeholders.scss         占位符
    _variables.scss            变量
  |-base
    _reset.scss                样式表重置
    _base.scss                 基础样式
    _help.scss                 辅助样式
  |-components                组件
    _btn.sccc
    _icon.scss
  |-modules                     模块
    _module1.scss
    _module2.scss
  |-layout
    _footer.scss               尾部
    _header.scss               头部
    _layout.scss               布局
    _nav.scss                  导航
  |-vendors                      库
  |-pages                        页面
    page1.scss
    page2.scss
|-slim
  |-modules
    module1.slim
    module2.slim
  |-pages
    page1.slim
    page2.slim
|-html
  |-pages
    page1.html
    page2.html

后面页面越来越多，需要对页面进行归类，目录结构变成这样

|-img
|-js
|-css
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.css
      page2.css
|-scss
  |-utils
    _function.scss             函数
    _mixin.scss                混合
    _placeholders.scss         占位符
    _variables.scss            变量
  |-base
    _reset.scss                样式表重置
    _base.scss                 基础样式
    _help.scss                 辅助样式
  |-components                组件
    _btn.sccc
    _icon.scss
  |-modules                     模块
    _module1.scss
    _module2.scss
  |-layout
    _footer.scss               尾部
    _header.scss               头部
    _layout.scss               布局
    _nav.scss                  导航
  |-vendors                      库
  |-pages                        页面
    |-user
    |-other
    |-order
    |-index
      page1.scss
      page2.scss
|-slim
  |-modules
    module1.slim
    module2.slim
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.slim
      page2.slim
|-html
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.html
      page2.html

蛋疼了，目录层级越来越深，文件越来越难找了。再后来引入了svg，目录结构变成这样

|-img
|-js
|-css
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.css
      page2.css
|-scss
  |-utils
    _function.scss             函数
    _mixin.scss                混合
    _placeholders.scss         占位符
    _variables.scss            变量
  |-base
    _reset.scss                样式表重置
    _base.scss                 基础样式
    _help.scss                 辅助样式
  |-components                组件
    _btn.sccc
    _icon.scss
  |-modules                     模块
    _module1.scss
    _module2.scss
  |-layout
    _footer.scss               尾部
    _header.scss               头部
    _layout.scss               布局
    _nav.scss                  导航
  |-vendors                      库
  |-pages                        页面
    |-user
    |-other
    |-order
    |-index
      page1.scss
      page2.scss
|-slim
  |-modules
    module1.slim
    module2.slim
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.slim
      page2.slim
|-html
  |-pages
    |-user
    |-other
    |-order
    |-index
      page1.html
      page2.html
|-icon
  |-svgs
    |-module1
      svg1.svg
      svg2.svg
  |-symbols
  |-sprites

symbols和sprites是我用gulp-svg-sprites生成的。东西越来越多，越来越分散，相同模块的东西越来越不好找了。

新的目录结构

新的目录结构以模块为基础，所有的东西都放在一起，目录结构如下

|-modules
  |-header
  |-footer
  |-login
    |-sprites
    |-svgs
    |-symbols
    login.css
    login.html
  |-sidebar
  |-nav
|-pages
  |-login
    |-posthtml
      login.html
    |-postcss
      login.css
    |-html
      login.html
    |-css
      login.css

新的页面使用posthtml和postcss代替slim和sass。html的拼装使用了gulp-html-tag-include，只要把模块代码<include>进来。css使用了postcss-modules，css module
可以用来自定义命名规则，所以不用命名空间了。
比如我们有一个mixin.css文件，

.title {
    color: black;
    font-size: 40px;
}

.title:hover {
    color: red;
}

style.css可以这么调用

:global .page{
    padding: 20px;
}

.title{
    composes: title from "./test/postcss/mixins.css";
    color: green;
}

.article{
    font-size: 16px;
}

有点类似sass的@extend，可以用来代替@extend和@mixin。
然后在gulp里面配置命名规则

var fs = require('fs');
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var path = require("path");
gulp.task('test', function () {

    //css
    gulp.src("test/postcss/**.css")
    .pipe(
      postcss([
        require('postcss-modules')({
          getJSON: function(cssFileName, json) {
            var cssName       = path.basename(cssFileName, '.css');
            var jsonFileName  = path.resolve('./test/css/' + cssName + '.json');
            fs.writeFileSync(jsonFileName, JSON.stringify(json));
          },
          generateScopedName: function(name, filename, css) {
            var i         = css.indexOf('.' + name);
            var numLines  = css.substr(0, i).split(/[\r\n]/).length;
            var file      = path.basename(filename, '.css');

            return '_' + file + '_' + numLines + '_' + name;
          }
        })
      ])
    )
    .pipe(gulp.dest("test/css/"))
});

编译完的mixins.css

._mixins_1_title {
    color: black;
    font-size: 40px;
}

._mixins_1_title:hover {
    color: red;
}

对应的json文件

{"title":"_mixins_1_title"}

编译完的style.css

._mixins_1_title {
    color: black;
    font-size: 40px;
}

._mixins_1_title:hover {
    color: red;
}

.page{
    padding: 20px;
}

._styles_5_title{
    color: green;
}

._styles_10_article{
    font-size: 16px;
}

对应的json文件

{"title":"_styles_5_title _mixins_1_title","article":"_styles_10_article"}

js可以读对应的json文件，完成class的替换，比如这个例子。更详细的可以看这篇文章，中文翻译

这种方式使得组件有更好的兼容性，减少命名冲突的可能。有点类似web component，起到了隔离的作用。

最后就是打包了。gulpfile文件如下

var fs = require('fs');
var gulp = require('gulp');
var svgSprite = require("gulp-svg-sprites");
var svg2png = require('gulp-svg2png');
var filter = require('gulp-filter');
var postcss = require('gulp-postcss');
var include = require('gulp-html-tag-include');
var cssnext = require("gulp-cssnext");
var path = require("path");
var module = ["login","header","footer","sidebar","index"];

gulp.task('default', function () {
    //svg
    for(var i in module){
      gulp.src("modules/"+module[i]+"/svgs/*.svg")
          .pipe(svgSprite({
            mode: "symbols",
            common: "svg",
            selector: "icon-%f"
          }))
          .pipe(gulp.dest("modules/"+module[i]+"/symbols"))
    }
    //html
    gulp.src('pages/user/login/posthtml/**.html')
        .pipe(include())
        .pipe(gulp.dest('pages/user/login/html/'));
    //css
    gulp.src("pages/user/login/postcss/**.css")
    .pipe(
      postcss([
        require('postcss-modules')({
          getJSON: function(cssFileName, json) {
            var cssName       = path.basename(cssFileName, '.css');
            var jsonFileName  = path.resolve('pages/user/login/postcss/' + cssName + '.json');
            fs.writeFileSync(jsonFileName, JSON.stringify(json));
          },
          generateScopedName: function(name, filename, css) {
            var i         = css.indexOf('.' + name);
            var numLines  = css.substr(0, i).split(/[\r\n]/).length;
            var file      = path.basename(filename, '.css');

            return '_' + file + '_' + numLines + '_' + name;
          }
        })
      ])
    )
    .pipe(cssnext())
    .pipe(gulp.dest("pages/user/login/css/"))
});

再按需要添加module数组的内容。

[voischev]

Hi! Look this BEM filesystem
And this ENB build tools

;)

[zhouwenbin]

@voischev Thanks.Let me try.

[voischev]

@zhouwenbin try start https://github.com/bem/project-stub