Skip to content
This repository has been archived by the owner on Mar 26, 2018. It is now read-only.

Use grunt-bower-install for HTML dependency injection. #497

Closed
wants to merge 1 commit into from
Closed

Use grunt-bower-install for HTML dependency injection. #497

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 32 additions & 66 deletions app/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
'use strict';
var fs = require('fs');
var path = require('path');
var util = require('util');
var angularUtils = require('../util.js');
var spawn = require('child_process').spawn;
var yeoman = require('yeoman-generator');
var chalk = require('chalk');
var wiredep = require('wiredep');


var Generator = module.exports = function Generator(args, options) {
Expand Down Expand Up @@ -66,7 +68,10 @@ var Generator = module.exports = function Generator(args, options) {
});

this.on('end', function () {
this.installDependencies({ skipInstall: this.options['skip-install'] });
this.installDependencies({
skipInstall: this.options['skip-install'],
callback: this._injectDependencies.bind(this)
});

var enabledComponents = [];

Expand Down Expand Up @@ -97,9 +102,10 @@ var Generator = module.exports = function Generator(args, options) {
].concat(enabledComponents)
}
});

});

this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));
this.pkg = require(__dirname, '../package.json');
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.pkg = require('../package.json');

};

util.inherits(Generator, yeoman.generators.Base);
Expand Down Expand Up @@ -213,78 +219,18 @@ Generator.prototype.readIndex = function readIndex() {
// Waiting a more flexible solution for #138
Generator.prototype.bootstrapFiles = function bootstrapFiles() {
var sass = this.compassBootstrap;
var files = [];
var source = 'styles/' + ( sass ? 's' : '' ) + 'css/';
var dest = 'app/styles/';
var mainFile = 'main.' + (sass ? 's' : '') + 'css';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

var mainFile = 'main.' + (sass ? 'scss' : 'css');


if (this.bootstrap && !sass) {
files.push('bootstrap.css');
this.copy('fonts/glyphicons-halflings-regular.eot', 'app/fonts/glyphicons-halflings-regular.eot');
this.copy('fonts/glyphicons-halflings-regular.ttf', 'app/fonts/glyphicons-halflings-regular.ttf');
this.copy('fonts/glyphicons-halflings-regular.svg', 'app/fonts/glyphicons-halflings-regular.svg');
this.copy('fonts/glyphicons-halflings-regular.woff', 'app/fonts/glyphicons-halflings-regular.woff');
}

files.push('main.' + (sass ? 's' : '') + 'css');

files.forEach(function (file) {
this.copy(source + file, 'app/styles/' + file);
}.bind(this));

this.indexFile = this.appendFiles({
html: this.indexFile,
fileType: 'css',
optimizedPath: 'styles/main.css',
sourceFileList: files.map(function (file) {
return 'styles/' + file.replace('.scss', '.css');
}),
searchPath: ['.tmp', 'app']
});
};

Generator.prototype.bootstrapJS = function bootstrapJS() {
if (!this.bootstrap) {
return; // Skip if disabled.
}

// Wire Twitter Bootstrap plugins
this.indexFile = this.appendScripts(this.indexFile, 'scripts/plugins.js', [
'bower_components/sass-bootstrap/js/affix.js',
'bower_components/sass-bootstrap/js/alert.js',
'bower_components/sass-bootstrap/js/button.js',
'bower_components/sass-bootstrap/js/carousel.js',
'bower_components/sass-bootstrap/js/transition.js',
'bower_components/sass-bootstrap/js/collapse.js',
'bower_components/sass-bootstrap/js/dropdown.js',
'bower_components/sass-bootstrap/js/modal.js',
'bower_components/sass-bootstrap/js/scrollspy.js',
'bower_components/sass-bootstrap/js/tab.js',
'bower_components/sass-bootstrap/js/tooltip.js',
'bower_components/sass-bootstrap/js/popover.js'
]);
};

Generator.prototype.extraModules = function extraModules() {
var modules = [];
if (this.resourceModule) {
modules.push('bower_components/angular-resource/angular-resource.js');
}

if (this.cookiesModule) {
modules.push('bower_components/angular-cookies/angular-cookies.js');
}

if (this.sanitizeModule) {
modules.push('bower_components/angular-sanitize/angular-sanitize.js');
}

if (this.routeModule) {
modules.push('bower_components/angular-route/angular-route.js');
}

if (modules.length) {
this.indexFile = this.appendScripts(this.indexFile, 'scripts/modules.js',
modules);
}
this.copy(source + mainFile, dest + mainFile);
};

Generator.prototype.appJs = function appJs() {
Expand Down Expand Up @@ -313,3 +259,23 @@ Generator.prototype.imageFiles = function () {
this.sourceRoot(path.join(__dirname, 'templates'));
this.directory('images', 'app/images', true);
}

Generator.prototype._injectDependencies = function _injectDependencies() {
var howToInstall =
'\nAfter running `npm install & bower install`, inject your front end dependencies into' +
'\nyour HTML by running:' +
'\n' +
chalk.yellow.bold('\n grunt bower-install');

if (this.options['skip-install']) {
console.log(howToInstall);
} else {
wiredep({
directory: 'app/bower_components',
bowerJson: JSON.parse(fs.readFileSync('./bower.json')),
ignorePath: 'app/',
htmlFile: 'app/index.html',
cssPattern: '<link rel="stylesheet" href="{{filePath}}">'
});
}
}
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@
"test": "mocha"
},
"dependencies": {
"yeoman-generator": "~0.13.0"
"yeoman-generator": "~0.13.0",
"chalk": "~0.3.0",
"wiredep": "~0.4.2"
},
"peerDependencies": {
"generator-karma": "~0.6.0",
Expand Down
8 changes: 8 additions & 0 deletions templates/common/Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,14 @@ module.exports = function (grunt) {
}
},

// Automatically inject Bower components into the HTML file
'bower-install': {
app: {
html: '<%%= yeoman.app %>/index.html',
ignorePath: '<%%= yeoman.app %>/'
}
},

<% if (coffee) { %>
// Compiles CoffeeScript to JavaScript
coffee: {
Expand Down
1 change: 1 addition & 0 deletions templates/common/_package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"devDependencies": {
"grunt": "~0.4.1",
"grunt-autoprefixer": "~0.4.0",
"grunt-bower-install": "~0.7.0",
"grunt-concurrent": "~0.4.1",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-coffee": "~0.7.0",
Expand Down
23 changes: 16 additions & 7 deletions templates/common/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,19 @@
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<!-- build:css styles/vendor.css -->
<!-- bower:css -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp,app}) styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<!-- endbuild -->
</head>
<body ng-app="<%= scriptAppName %>">
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->

<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->

<!-- Add your site or application content here -->
<% if (ngRoute) {
%><div class="container" ng-view></div><%
Expand All @@ -39,7 +41,14 @@
ga('send', 'pageview');
</script>

<% if (bootstrap) { %><script src="bower_components/jquery/jquery.js"></script><% } %>
<script src="bower_components/angular/angular.js"></script>
<!--[if lt IE 9]>
<script src="bower_components/es5-shim/es5-shim.js"></script>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->

<!-- build:js scripts/vendor.js -->
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->
</body>
</html>