How to install Dependencies in cusotm yeoman generator - generator

Question

I'm creating a yeoman generator to make a simple scaffolding for projects.
I would like to include sass bootstrap in the project.
How do I include sass bootstrap to be injected.
I have the following index.js to create the folder and file structures form
files in the templates folder.
This exmaple uses sass files but I would like to include sass bootstrap and I would then change the file structure.
'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

create directories and _package.json like below
app/index.js
app/templates
app/templates/_package.json
app/templates/_gruntfile.js
Write like this.
{
"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"
}
}
write _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'
};