Question

我知道已经有大量的自动化工具来创建样式指南/模式库但是为了学习，我想看看我是否可以自己动手。

编制SASS很简单。与js相同。我还可以看到如何使用类从多个文件中包装HTML块并将其编译为单个文件。非常适合显示所有＆＃39;部分＆＃39;一起在一页上。

gulp.task('inject:wrap', function(){
return gulp.src('./_patterns/*/*/*.html')
/// get the partial html filename here and insert below @@@
    .pipe(inject.wrap('<div id="@@@" class="pattern">', '</div>'))  
    .pipe(concat('patterns.html'))
    .pipe(gulp.dest('build'));
});

gulp.task('process', ['inject:wrap']);

我努力的是如何获取块的文件名 - 让我们说_button.html - 并将其作为元素ID传递给包装器＆＃34; @@@＆＃34;以上。然后我可以使用它来构建样式指南导航/锚点链接。

Answer 1

以下是我获得的示例代码，使用了jade模板语言（它自己处理注入，部分，评估等）;有两个任务，一个生成静态HTML页面，另一个预编译模板用作AMD中包含的运行时模板函数

// preprocess & render jade static templates
gulp.task('views:preprocess', function () {
  return gulp.src([ 'source/views/*.jade', '!source/views/layout.jade' ])
    .pipe(plumber()) // plumber, because why not?
    .pipe(data(function (file) {
      // prepare data to be passed to the template
      // here we can use the file name to map specific data to each file
      return _.assign(settingsData, { timestamp: timestamp });
    }))
    // render template with data
    .pipe(jade())
    .pipe(gulp.dest('destination'));
});


// precompile jade runtime templates
gulp.task('views:precompile', function () {
  // grab folder names
  var folders = fs.readdirSync('source/templates').filter(function (file) {
      return fs.statSync(path.join('source/templates', file)).isDirectory();
    });

  // create a separate task for each folder
  var tasks = folders.map(function (folder) {
      return gulp.src(path.join('source/templates', folder, '*.jade'))
        .pipe(plumber())
        // pre-compile the template as functions, for runtime
        .pipe(jade({
          client: true
        }))
        // wrap it in AMD, so we can use stuff like require.js to fetch them later
        .pipe(wrap({
          moduleRoot: 'source/templates',
          modulePrefix: 'templates',
          deps: [ 'jade' ],
          params: [ 'jade' ]
        }))
        // concat all the templates in each folder to a single .js file
        .pipe(concat(folder + '.js'))
        .pipe(uglify())
        .pipe(header(banner, { package: packageData }))
        .pipe(gulp.dest('destination/scripts/templates'));
    });

  return merge(tasks);
});

我使用的模块包括merge-stream，path，gulp，fs，gulp-data，gulp-jade，{{1等等我没有完全明白你想要实现的目标，但我希望这能为你提供一些线索。

使用gulp创建样式指南/模式库

1 个答案: