Yeoman を触ってみる
yeoman が使えるんじゃ無いか、とおもって試してみる。 以下に従ってインストールした。
http://yeoman.io/gettingstarted.html
npmの依存モジュールのダウンロードの途中でいくつかWARNがでているのだけど問題ないんだろうか。 っというか、インストール直後 which yo してもどこにも無い。
npm root -g
してみると、
/usr/local/share/npm/lib/node_modules
だというので、見に行ってみると、ちゃんとyoがインストールされている。 という事は単にパスが通っていない事になる。
なんか /usr/local/bin あたりにシンボリックリンクはってくれるんじゃなかったっけ？
npmのインストールログをじっとみてたら /usr/local/share/npm/bin/ だった。ここに .bash_profie でパス通してなんとか使えるようになった。
ということでとりあえず
yo webapp
してみるとなんかカーソルキーとスペースキーでオプション選択する画面になる（コンソール上で）
適当にオプションを選択してEnter
npmが次々とモジュールをダウンロードしてきて初期構成が出来上がったっぽい
Gruntfile.js の中身は
// Generated on 2013-08-21 using generator-webapp 0.2.7 'use strict'; var LIVERELOAD_PORT = 35729; var lrSnippet = require('connect-livereload')({port: LIVERELOAD_PORT}); var mountFolder = function (connect, dir) { return connect.static(require('path').resolve(dir)); }; // # Globbing // for performance reasons we're only matching one level down: // 'test/spec/{,*/}*.js' // use this if you want to recursively match all subfolders: // 'test/spec/**/*.js' module.exports = function (grunt) { // load all grunt tasks require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks); // configurable paths var yeomanConfig = { app: 'app', dist: 'dist' }; grunt.initConfig({ yeoman: yeomanConfig, watch: { coffee: { files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], tasks: ['coffee:dist'] }, coffeeTest: { files: ['test/spec/{,*/}*.coffee'], tasks: ['coffee:test'] }, compass: { files: ['<%= yeoman.app %>/styles/{,*/}*.{scss,sass}'], tasks: ['compass:server', 'autoprefixer'] }, styles: { files: ['<%= yeoman.app %>/styles/{,*/}*.css'], tasks: ['copy:styles', 'autoprefixer'] }, livereload: { options: { livereload: LIVERELOAD_PORT }, files: [ '<%= yeoman.app %>/*.html', '.tmp/styles/{,*/}*.css', '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] } }, connect: { options: { port: 9000, // change this to '0.0.0.0' to access the server from outside hostname: 'localhost' }, livereload: { options: { middleware: function (connect) { return [ lrSnippet, mountFolder(connect, '.tmp'), mountFolder(connect, yeomanConfig.app) ]; } } }, test: { options: { middleware: function (connect) { return [ mountFolder(connect, '.tmp'), mountFolder(connect, 'test') ]; } } }, dist: { options: { middleware: function (connect) { return [ mountFolder(connect, yeomanConfig.dist) ]; } } } }, open: { server: { path: 'http://localhost:<%= connect.options.port %>' } }, clean: { dist: { files: [{ dot: true, src: [ '.tmp', '<%= yeoman.dist %>/*', '!<%= yeoman.dist %>/.git*' ] }] }, server: '.tmp' }, jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', '<%= yeoman.app %>/scripts/{,*/}*.js', '!<%= yeoman.app %>/scripts/vendor/*', 'test/spec/{,*/}*.js' ] }, mocha: { all: { options: { run: true, urls: ['http://localhost:<%= connect.options.port %>/index.html'] } } }, coffee: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/scripts', src: '{,*/}*.coffee', dest: '.tmp/scripts', ext: '.js' }] }, test: { files: [{ expand: true, cwd: 'test/spec', src: '{,*/}*.coffee', dest: '.tmp/spec', ext: '.js' }] } }, compass: { options: { sassDir: '<%= yeoman.app %>/styles', cssDir: '.tmp/styles', generatedImagesDir: '.tmp/images/generated', imagesDir: '<%= yeoman.app %>/images', javascriptsDir: '<%= yeoman.app %>/scripts', fontsDir: '<%= yeoman.app %>/styles/fonts', importPath: '<%= yeoman.app %>/bower_components', httpImagesPath: '/images', httpGeneratedImagesPath: '/images/generated', httpFontsPath: '/styles/fonts', relativeAssets: false }, dist: { options: { generatedImagesDir: '<%= yeoman.dist %>/images/generated' } }, server: { options: { debugInfo: true } } }, autoprefixer: { options: { browsers: ['last 1 version'] }, dist: { files: [{ expand: true, cwd: '.tmp/styles/', src: '{,*/}*.css', dest: '.tmp/styles/' }] } }, // not used since Uglify task does concat, // but still available if needed /*concat: { dist: {} },*/ requirejs: { dist: { // Options: https://github.com/jrburke/r.js/blob/master/build/example.build.js options: { // `name` and `out` is set by grunt-usemin baseUrl: yeomanConfig.app + '/scripts', optimize: 'none', // TODO: Figure out how to make sourcemaps work with grunt-usemin // https://github.com/yeoman/grunt-usemin/issues/30 //generateSourceMaps: true, // required to support SourceMaps // http://requirejs.org/docs/errors.html#sourcemapcomments preserveLicenseComments: false, useStrict: true, wrap: true //uglify2: {} // https://github.com/mishoo/UglifyJS2 } } }, rev: { dist: { files: { src: [ '<%= yeoman.dist %>/scripts/{,*/}*.js', '<%= yeoman.dist %>/styles/{,*/}*.css', '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp}', '<%= yeoman.dist %>/styles/fonts/*' ] } } }, useminPrepare: { options: { dest: '<%= yeoman.dist %>' }, html: '<%= yeoman.app %>/index.html' }, usemin: { options: { dirs: ['<%= yeoman.dist %>'] }, html: ['<%= yeoman.dist %>/{,*/}*.html'], css: ['<%= yeoman.dist %>/styles/{,*/}*.css'] }, imagemin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/images', src: '{,*/}*.{png,jpg,jpeg}', dest: '<%= yeoman.dist %>/images' }] } }, svgmin: { dist: { files: [{ expand: true, cwd: '<%= yeoman.app %>/images', src: '{,*/}*.svg', dest: '<%= yeoman.dist %>/images' }] } }, cssmin: { // This task is pre-configured if you do not wish to use Usemin // blocks for your CSS. By default, the Usemin block from your // `index.html` will take care of minification, e.g. // // <!-- build:css({.tmp,app}) styles/main.css --> // // dist: { // files: { // '<%= yeoman.dist %>/styles/main.css': [ // '.tmp/styles/{,*/}*.css', // '<%= yeoman.app %>/styles/{,*/}*.css // ] // } // } }, htmlmin: { dist: { options: { /*removeCommentsFromCDATA: true, // https://github.com/yeoman/grunt-usemin/issues/44 //collapseWhitespace: true, collapseBooleanAttributes: true, removeAttributeQuotes: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeOptionalTags: true*/ }, files: [{ expand: true, cwd: '<%= yeoman.app %>', src: '*.html', dest: '<%= yeoman.dist %>' }] } }, // Put files not handled in other tasks here copy: { dist: { files: [{ expand: true, dot: true, cwd: '<%= yeoman.app %>', dest: '<%= yeoman.dist %>', src: [ '*.{ico,png,txt}', '.htaccess', 'images/{,*/}*.{webp,gif}', 'styles/fonts/*' ] }] }, styles: { expand: true, dot: true, cwd: '<%= yeoman.app %>/styles', dest: '.tmp/styles/', src: '{,*/}*.css' } }, concurrent: { server: [ 'compass', 'coffee:dist', 'copy:styles' ], test: [ 'coffee', 'copy:styles' ], dist: [ 'coffee', 'compass', 'copy:styles', 'imagemin', 'svgmin', 'htmlmin' ] }, bower: { options: { exclude: ['modernizr'] }, all: { rjsConfig: '<%= yeoman.app %>/scripts/main.js' } } }); grunt.registerTask('server', function (target) { if (target === 'dist') { return grunt.task.run(['build', 'open', 'connect:dist:keepalive']); } grunt.task.run([ 'clean:server', 'concurrent:server', 'autoprefixer', 'connect:livereload', 'open', 'watch' ]); }); grunt.registerTask('test', [ 'clean:server', 'concurrent:test', 'autoprefixer', 'connect:test', 'mocha' ]); grunt.registerTask('build', [ 'clean:dist', 'useminPrepare', 'concurrent:dist', 'autoprefixer', 'requirejs', 'concat', 'cssmin', 'uglify', 'copy:dist', 'rev', 'usemin' ]); grunt.registerTask('default', [ 'jshint', 'test', 'build' ]); };
これを生成している実態はこいつのようだ
https://github.com/yeoman/generator-webapp
思ったより小さい。Gruntがかなりの部分をこなしてくれているような予感
