目的为了更好地复用样式，以及出于练习gulp、scss和学习mocha的目的，我在尝试使用gulp、scss构建一个用于pc端的样式库，使用mocha进行浏览器端的测试。为了方便起见，脚本没有使用纯javascript编写，而是选择了jquery。目前，基本的框架已经搭好，正在完善样式中。目录结构lib –> 源代码库scss –> scss代码库mixins –> 共用mixinscomponents –> 组件layouts –> 布局text –> 文字和文本utilities –> 实用的scssstate –> 状态variables –> 变量js –> 组件使用的jsvendor –> 第三方资源(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可以会发现文件没有合并。最后由于本人能力有限，如有错误，欢迎指出；如果有什么建议，请不吝赐教。