Question

我正在创建一个yeoman生成器，为项目创建一个简单的脚手架。

我想在项目中加入sass bootstrap。

如何包含要注入的sass bootstrap。

我有以下index.js来创建文件夹和文件结构表单模板文件夹中的文件。

这个exmaple使用sass文件，但我想包含sass bootstrap，然后我会更改文件结构。

'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var yosay = require('yosay');
var chalk = require('chalk');


var WordpresscdGenerator = yeoman.generators.Base.extend({

  init: function () {
    this.pkg = require('../package.json');

    this.on('end', function () {
      if (!this.options['skip-install']) {
        this.installDependencies({
                    //install sass bootstrap 
                });
      }
    });
  },

    promptUser: function(){
        var done = this.async();

        console.log(this.yeoman);

        var prompts = [{
            name: 'appName',
            message: 'What is the app called ?'
        }];

        this.prompt(prompts, function(props){
            this.appName = props.appName;

            done();
        }.bind(this));
    },

  scaffoldFolder: function(){
        this.mkdir('wp-content/themes/dist-theme');
        this.mkdir('wp-content/themes/dev-theme');
        this.mkdir('wp-content/themes/dev-theme/css');
        this.mkdir('wp-content/themes/dev-theme/css/scss');
        this.mkdir('wp-content/themes/dev-theme/fonts');
        this.mkdir('wp-content/themes/dev-theme/images');
        this.mkdir('wp-content/themes/dev-theme/js');
    },

    copyMainFiles: function(){
        this.copy('_gruntfile.js', 'wp-content/themes/gruntfile.js');
        this.copy('_package.json', 'wp-content/themes/package.json');
        this.copy('_bower.json', 'wp-content/themes/bower.json');
        //
        this.copy('_base_defaults.scss','wp-content/themes/dev-theme/css/scss/_base_defaults.scss');
        this.copy('_base_mixins.scss','wp-content/themes/dev-theme/css/scss/_base_mixins.scss');
        this.copy('_base_reset.scss','wp-content/themes/dev-theme/css/scss/_base_reset.scss');
        this.copy('_config.scss','wp-content/themes/dev-theme/css/scss/_config.scss');
        this.copy('_main.scss','wp-content/themes/dev-theme/css/scss/_main.scss');
        this.copy('styles.scss','wp-content/themes/dev-theme/css/scss/styles.scss');
        this.copy('styles.css','wp-content/themes/dev-theme/css/styles.css');
        this.copy('style.css','wp-content/themes/dev-theme/style.css');
        this.copy('base.js','wp-content/themes/dev-theme/js/base.js');
        this.copy('screenshot.png','wp-content/themes/dev-theme/screenshot.png');
        this.copy('index.php', 'wp-content/themes/dev-theme/index.php');
        this.copy('footer.php', 'wp-content/themes/dev-theme/footer.php');
        this.copy('functions.php', 'wp-content/themes/dev-theme/functions.php');
        this.copy('header.php', 'wp-content/themes/dev-theme/header.php');
        this.copy('404.php', 'wp-content/themes/dev-theme/404.php');
        //
        var context = {
          site_name: this.appName
        };

    }

});

module.exports = WordpresscdGenerator;

Answer 1

创建目录和_package.json，如下所示

app/index.js
app/templates
app/templates/_package.json
app/templates/_gruntfile.js

这样写。

{
  "name": "appname",
  "version": "0.0.0",
  "dependencies": {
    "grunt": "~0.4.6",
    "grunt-contrib-connect": "~0.9.0",
    "grunt-contrib-concat": "~0.5.1",
    "grunt-contrib-cssmin": "~0.12.2",
    "grunt-contrib-watch": "~0.6.1"
  }
}

写_gruntfile.js

module.exports = function(grunt){
    grunt.initConfig({
        server: {
            options: {
                keepalive: true,
                open: false,
                middleware: function(){
                    var middleware = [];
                    middleware.push(function(req, res, next){
                        if (req.url !== '/') return next();

                        res.setHeader('Content-type', 'text/html');
                        var html = grunt.file.read('app/header.html');
                        html += grunt.file.read('app/footer.html');
                        res.end(html);
                    });

                    middleware.push(function(req, res, next){
                        if (req.url !== '/css/main.css') return next();

                        res.setHeader('Content-type', 'text/css');
                        var css = '';

                        var files = grunt.file.expand("app/css/*.css");

                        for (var i = 0; i < files.length; i++) {
                          css += grunt.file.read(files[i]);
                        }

                        res.end(css);
                    });

                    middleware.push(function(req, res, next){
                        res.statusCode = 404;
                        res.end('Not Found');
                    });

                    return middleware;
                }
            }
        },
        concat: {
            dist: {
                src: ['app/header.html', 'app/footer.html'],
                dest: 'build/index.html'
            }
        },
        cssmin: {
            css: {
                files: {
                    'build/css/main.css': ['app/css/*.css']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-connect');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-contrib-concat');

    grunt.registerTask('serve', ['connect']);
    grunt.registerTask('build', ['concat', 'cssmin']);
    grunt.registerTask('default', ['build']); // 'default' = 'grunt'
};

如何在自定义yeoman生成器中安装依赖项

1 个答案: