BowerとNPMの初期設定をする。
install
npm install -g bower grunt-cli karma-cliまず、package.jsonを作る。
npm init次の命令でNPM packageを
npm install bower express grunt grunt-browserify grunt-concurrent grunt-contrib-clean grunt-contrib-copy grunt-contrib-watch grunt-html2js grunt-karma grunt-nodemon grunt-sass jasmine-core karma karma-jasmine karma-phantomjs-launcher --save-dev同じように、bower.jsonも作る。
bower initそして、.bowerrcというファイルを作って次のように内容を書いておく
{
"directory":"vendor"
}bowerで設置したPackageが入るDirectoryである。
Bowerから次のPackageを設置する。
bower install angular angular-ui-router bootstrap-sass-official angular-bootstrap --save
bower install angular-mocks --save-dev| name | description |
|---|---|
| angular | AngularJS |
| angular-ui-router | 更新せずにページの繊維ができるようになる |
| bootstrap-sass-official | Sass状態のBootstrap |
| angular-bootstrap | bootstrapのcomponentはjqueryの代わりにangularでできるようにしてくれる。 |
まず、Gruntfileを作る前に、gruntのbuildのための情報をまとめたファイルを作る。
build.config.js
module.exports = {
build_dir: "build",
app_files: {
js: ['src/app/**/*.js', '!src/app/**/*.spec.js'],
atpl: ['src/app/**/*.tpl.html'],
html: ['src/index.html']
},
vendor_files:{
js: [
'vendor/angular/angular.js',
'vendor/angular-ui-router/release/angular-ui-router.js',
'vendor/angular-bootstrap/ui-bootstrap-tpls.js',
]
}
}Gruntfile.js
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-copy');
grunt.loadNpmTasks('grunt-sass');
grunt.loadNpmTasks('grunt-nodemon');
grunt.loadNpmTasks('grunt-concurrent');
grunt.loadNpmTasks('grunt-html2js');
grunt.loadNpmTasks('grunt-browserify');
grunt.loadNpmTasks('grunt-karma');
var userConfig = require('./build.config.js');
var taskConfig = {
pkg: grunt.file.readJSON('package.json'),
clean:[
'<%= build_dir %>'
],
copy: {
appjs: {
files: [
{
src: ['<%= app_files.js %>', '<%= vendor_files.js %>'],
dest: '<%= build_dir %>',
cwd: '.',
expand: true
}
]
}
},
watch: {
jssrc: {
files: [
'<%= app_files.js %>'
],
tasks: ['copy:appjs', 'index']
},
atpl: {
files: [
'<%= app_files.atpl %>'
],
tasks: ['html2js']
},
gruntfile: {
files: 'Gruntfile.js',
options: {
reload: true
}
},
modules: {
files: 'src/modules/**/*.js',
tasks: ['browserify']
},
sass: {
files: 'src/scss/**/*.scss',
tasks: ['sass']
},
index: {
files: 'src/index.html',
tasks: ['index:build']
}
},
index: {
build: {
dir: '<%= build_dir %>',
src: [
'<%= vendor_files.js %>',
'<%= build_dir %>/src/**/*.js',
'<%= html2js.app.dest %>',
'<%= build_dir %>/bundle.js',
'<%= build_dir %>/**/*.css'
]
}
},
html2js: {
app: {
options: {
base: 'src/app'
},
src: ['<%= app_files.atpl %>'],
dest: '<%= build_dir %>/templates-app.js'
}
},
browserify: {
build: {
src: ['src/modules/modules.js'],
dest: '<%= build_dir %>/bundle.js',
options: {
debug: true
}
}
},
sass: {
options: {
sourceMap: true
},
dist:{
files: {
'<%= build_dir %>/main.css': 'src/scss/main.scss'
}
}
},
nodemon: {
dev: {
script: 'server/server.js',
options: {
watch: ['server']
}
}
},
karma: {
unit: {
configFile: 'karma.conf.js'
}
},
concurrent: {
dev: {
tasks: ['karma', 'watch', 'nodemon'],
options: {
logConcurrentOutput: true
}
}
}
};
grunt.initConfig(grunt.util._.extend(taskConfig, userConfig));
grunt.registerTask('default', ['build', 'concurrent']);
grunt.registerTask('build', ['clean', 'copy', 'html2js', 'browserify', 'sass', 'index']);
function filterForExtension(extension, files) {
var regex = new RegExp('\\.' + extension + '$');
var dirRE = new RegExp('^(' + grunt.config('build_dir') + ')\/', 'g');
return files.filter(function (file) {
return file.match(regex);
}).map(function (file){
return file.replace(dirRE, '');
});
}
grunt.registerMultiTask('index', 'Process index.html template', function(){
var jsFiles = filterForExtension('js', this.filesSrc);
var cssFiles = filterForExtension('css', this.filesSrc);
//grunt.log.writeln(this.filesSrc);
grunt.file.copy('src/index.html', this.data.dir + '/index.html', {
process: function (contents, path) {
return grunt.template.process(contents, {
data: {
scripts: jsFiles,
styles: cssFiles,
version: grunt.config('pkg.version')
}
});
}
});
});
}Karmaの初期設定をする。
karma init- Jasmine
- no
- PhantomJS
- ~( skip )
そのあと、生成されたkarma.conf.jsを少し修正する。
...
files: [
'build/vendor/angular/**/*.js',
'vendor/angular-mocks/angular-mocks.js',
'build/vendor/**/*.js',
'build/**/*.js',
'src/app/**/*.js'
],
...index.htmlを作る。
<!DOCTYPE html>
<html ng-app="kazng">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<% styles.forEach(function(file){ %>
<link rel="stylesheet" type="text/css" href="<%= file%>"/>
<% }); %>
</head>
<body>
<ui-view></ui-view>
<% scripts.forEach(function(file){ %>
<script type="text/javascript" src="<%= file %>"></script>
<% }); %>
</body>
</html>テストのためのサーバを立てる。
server/server.js
var config = require('./server-config'),
express = require('express'),
app = express(),
server = require('http').createServer(app);
// CONFIG SERVER
app.use('/', express.static(config.static_site_root));
// FIRE IT UP
server.listen(config.port, function(){
console.log("Express server listening on port %d", config.port);
});server/server-config.js
module.exports = {
port: 3444,
static_site_root: __dirname + '/../build' //up a dir and find build
};