【发布时间】：2014-02-16 02:04:59
【问题描述】：
我一直在尝试基于默认 webapp 编写自己的生成器，但它非常令人困惑，并且文档在为初学者解释该过程时非常糟糕。我想要的是能够编写苗条的模板并让生成器将它们转换为 hmtl。我尝试用 grunt-slim 包做到这一点，但到目前为止一无所获。如果有人有任何点击，那将不胜感激。
index.js：
'use strict';
var util = require('util');
var path = require('path');
var yeoman = require('yeoman-generator');
var TestGenerator = module.exports = function TestGenerator(args, options, config) {
yeoman.generators.Base.apply(this, arguments);
this.on('end', function () {
this.installDependencies({ skipInstall: options['skip-install'] });
});
this.pkg = JSON.parse(this.readFileAsString(path.join(__dirname, '../package.json')));
};
util.inherits(TestGenerator, yeoman.generators.Base);
TestGenerator.prototype.askFor = function askFor() {
var cb = this.async();
// have Yeoman greet the user.
console.log(this.yeoman);
var prompts = [{
type: 'input',
name: 'projectName',
message: 'What would you like to name this project?'
}];
this.prompt(prompts, function (props) {
this.projectName = props.projectName;
cb();
}.bind(this));
};
TestGenerator.prototype.projectfiles = function projectfiles() {
this.template('Gruntfile.js');
this.copy('_package.json', 'package.json');
this.copy('_bower.json', 'bower.json');
this.copy('bowerrc', '.bowerrc');
this.copy('jshintrc', '.jshintrc');
this.copy('editorconfig', '.editorconfig');
};
TestGenerator.prototype.writeIndex = function writeIndex() {
this.indexFile = this.readFileAsString(path.join(this.sourceRoot(), 'index.slim'));
this.indexFile = this.engine(this.indexFile, this);
this.indexFile = this.appendFiles({
html: this.indexFile,
fileType: 'js',
optimizedPath: 'scripts/main.js',
sourceFileList: ['scripts/main.js'],
searchPath: '{app,.tmp}'
});
};
TestGenerator.prototype.app = function app() {
this.mkdir('app');
this.mkdir('app/styles');
this.mkdir('app/scripts');
this.mkdir('app/images');
this.copy('main.scss', 'app/styles/main.scss');
this.copy('main.js', 'app/scripts/main.js');
// this.copy('test.slim', 'app/test.slim');
this.write('app/index.html', this.indexFile);
};
Gruntfile.js：
// Generated on <%= (new Date).toISOString().split('T')[0] %> using <%= pkg.name %> <%= pkg.version %>
'use strict';
// # 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 grunt tasks automatically
require('load-grunt-tasks')(grunt);
// Time how long tasks take. Can help when optimizing build times
require('time-grunt')(grunt);
// Define the configuration for all the tasks
grunt.initConfig({
// Project settings
yeoman: {
// Configurable paths
app: 'app',
dist: 'dist'
},
// Watches files for changes and runs tasks based on the changed files
watch: {
js: {
files: ['<%%= yeoman.app %>/scripts/{,*/}*.js'],
tasks: ['jshint'],
options: {
livereload: true
}
},
jstest: {
files: ['test/spec/{,*/}*.js'],
tasks: ['test:watch']
},
gruntfile: {
files: ['Gruntfile.js']
},
compass: {
files: ['<%%= yeoman.app %>/styles/{,*/}*.{scss,sass}'],
tasks: ['compass:server', 'autoprefixer']
},
styles: {
files: ['<%%= yeoman.app %>/styles/{,*/}*.css'],
tasks: ['newer:copy:styles', 'autoprefixer']
},
livereload: {
options: {
livereload: '<%%= connect.options.livereload %>'
},
files: [
'<%%= yeoman.app %>/{,*/}*.html',
'.tmp/styles/{,*/}*.css',
'.tmp/scripts/{,*/}*.js',
'<%%= yeoman.app %>/images/{,*/}*.{gif,jpeg,jpg,png,svg,webp}'
]
}
},
// The actual grunt server settings
connect: {
options: {
port: 9000,
livereload: 35729,
// Change this to '0.0.0.0' to access the server from outside
hostname: 'localhost'
},
livereload: {
options: {
open: true,
base: [
'.tmp',
'<%%= yeoman.app %>'
]
}
},
test: {
options: {
port: 9001,
base: [
'.tmp',
'test',
'<%%= yeoman.app %>'
]
}
},
dist: {
options: {
open: true,
base: '<%%= yeoman.dist %>',
livereload: false
}
}
},
// Empties folders to start fresh
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%%= yeoman.dist %>/*',
'!<%%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp'
},
// Make sure code styles are up to par and there are no obvious mistakes
jshint: {
options: {
jshintrc: '.jshintrc',
reporter: require('jshint-stylish')
},
all: [
'Gruntfile.js',
'<%%= yeoman.app %>/scripts/{,*/}*.js',
'!<%%= yeoman.app %>/scripts/vendor/*',
'test/spec/{,*/}*.js'
]
},
// Compiles Sass to CSS and generates necessary files if requested
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,
assetCacheBuster: false
},
dist: {
options: {
generatedImagesDir: '<%%= yeoman.dist %>/images/generated'
}
},
server: {
options: {
debugInfo: true
}
}
},
// Add vendor prefixed styles
autoprefixer: {
options: {
browsers: ['last 1 version']
},
dist: {
files: [{
expand: true,
cwd: '.tmp/styles/',
src: '{,*/}*.css',
dest: '.tmp/styles/'
}]
}
},
// Automatically inject Bower components into the HTML file
'bower-install': {
app: {
html: '<%%= yeoman.app %>/index.html',
ignorePath: '<%%= yeoman.app %>/'
}
},
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%%= yeoman.dist %>/scripts/{,*/}*.js',
'<%%= yeoman.dist %>/styles/{,*/}*.css',
'<%%= yeoman.dist %>/images/{,*/}*.{gif,jpeg,jpg,png,webp}',
'<%%= yeoman.dist %>/styles/fonts/{,*/}*.*'
]
}
}
},
// Reads HTML for usemin blocks to enable smart builds that automatically
// concat, minify and revision files. Creates configurations in memory so
// additional tasks can operate on them
useminPrepare: {
options: {
dest: '<%%= yeoman.dist %>'
},
html: '<%%= yeoman.app %>/index.html'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: ['<%%= yeoman.dist %>']
},
html: ['<%%= yeoman.dist %>/{,*/}*.html'],
css: ['<%%= yeoman.dist %>/styles/{,*/}*.css']
},
// The following *-min tasks produce minified files in the dist folder
imagemin: {
dist: {
files: [{
expand: true,
cwd: '<%%= yeoman.app %>/images',
src: '{,*/}*.{gif,jpeg,jpg,png}',
dest: '<%%= yeoman.dist %>/images'
}]
}
},
svgmin: {
dist: {
files: [{
expand: true,
cwd: '<%%= yeoman.app %>/images',
src: '{,*/}*.svg',
dest: '<%%= yeoman.dist %>/images'
}]
}
},
htmlmin: {
dist: {
options: {
collapseBooleanAttributes: true,
collapseWhitespace: true,
removeAttributeQuotes: true,
removeCommentsFromCDATA: true,
removeEmptyAttributes: true,
removeOptionalTags: true,
removeRedundantAttributes: true,
useShortDoctype: true
},
files: [{
expand: true,
cwd: '<%%= yeoman.dist %>',
src: '{,*/}*.html',
dest: '<%%= yeoman.dist %>'
}]
}
},
// By default, your `index.html`'s <!-- Usemin block --> will take care of
// minification. These next options are pre-configured if you do not wish
// to use the Usemin blocks.
// cssmin: {
// dist: {
// files: {
// '<%%= yeoman.dist %>/styles/main.css': [
// '.tmp/styles/{,*/}*.css',
// '<%%= yeoman.app %>/styles/{,*/}*.css'
// ]
// }
// }
// },
// uglify: {
// dist: {
// files: {
// '<%%= yeoman.dist %>/scripts/scripts.js': [
// '<%%= yeoman.dist %>/scripts/scripts.js'
// ]
// }
// }
// },
// concat: {
// dist: {}
// },
// Copies remaining files to places other tasks can use
copy: {
dist: {
files: [{
expand: true,
dot: true,
cwd: '<%%= yeoman.app %>',
dest: '<%%= yeoman.dist %>',
src: [
'*.{ico,png,txt}',
'.htaccess',
'images/{,*/}*.webp',
'{,*/}*.html',
'styles/fonts/{,*/}*.*'
]
}]
},
styles: {
expand: true,
dot: true,
cwd: '<%%= yeoman.app %>/styles',
dest: '.tmp/styles/',
src: '{,*/}*.css'
}
},
// Generates a custom Modernizr build that includes only the tests you
// reference in your app
modernizr: {
devFile: '<%%= yeoman.app %>/bower_components/modernizr/modernizr.js',
outputFile: '<%%= yeoman.dist %>/bower_components/modernizr/modernizr.js',
files: [
'<%%= yeoman.dist %>/scripts/{,*/}*.js',
'<%%= yeoman.dist %>/styles/{,*/}*.css',
'!<%%= yeoman.dist %>/scripts/vendor/*'
],
uglify: true
},
// Run some tasks in parallel to speed up build process
concurrent: {
server: [
'compass:server',
'copy:styles'
],
test: [
'copy:styles'
],
dist: [
'compass',
'copy:styles',
'imagemin',
'svgmin'
]
},
slim: {
dist: {
options: {
pretty: true
},
files: {
'app/test.html': 'app/templates/test.slim'
}
}
}
});
grunt.loadNpmTasks('grunt-slim');
grunt.registerTask('serve', function (target) {
if (target === 'dist') {
return grunt.task.run(['build', 'connect:dist:keepalive']);
}
grunt.task.run([
'clean:server',
'slim',
'concurrent:server',
'autoprefixer',
'connect:livereload',
'watch'
]);
});
grunt.registerTask('server', function (target) {
grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.');
if (target) {
grunt.task.run(['serve:' + target]);
}
else {
grunt.task.run(['serve']);
}
});
grunt.registerTask('test', function(target) {
if (target !== 'watch') {
grunt.task.run([
'clean:server',
'concurrent:test',
'autoprefixer',
]);
}
grunt.task.run([
'connect:test'
]);
});
grunt.registerTask('build', [
'clean:dist',
'slim',
'useminPrepare',
'concurrent:dist',
'autoprefixer',
'copy:dist',
'modernizr',
'rev',
'usemin',
'htmlmin'
]);
grunt.registerTask('default', [
'newer:jshint',
'test',
'build'
]);
};
index.slim：
DOCTYPE html
html
head
meta charset="utf-8"
meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"
title <%= _.capitalize(projectName) %>
link rel="stylesheet" href="bower_components/bower-foundation/css/normalize.css"
link rel="stylesheet" href="bower_components/bower-foundation/css/foundation.css"
// build:css(.tmp) styles/main.css
link rel="stylesheet" href="styles/main.css"
// endbuild
script src="bower_components/modernizr/modernizr.js"
body
div.container Hello
div#abc
p there
// build:js scripts/vendor.js
// bower:js
script src="bower_components/jquery/jquery.js"
// endbower
// endbuild
_package.json:
{
"name": "<%= _.slugify(projectName) %>",
"version": "0.0.0",
"dependencies": {},
"devDependencies": {
"grunt-contrib-copy": "~0.4.1",
"grunt-contrib-concat": "~0.3.0",
"grunt-contrib-uglify": "~0.2.0",
"grunt-contrib-compass": "~0.7.0",
"grunt-contrib-jshint": "~0.7.0",
"grunt-contrib-cssmin": "~0.7.0",
"grunt-contrib-connect": "~0.5.0",
"grunt-contrib-clean": "~0.5.0",
"grunt-contrib-htmlmin": "~0.1.3",
"grunt-bower-install": "~0.7.0",
"grunt-contrib-imagemin": "~0.2.0",
"grunt-contrib-watch": "~0.5.2",
"grunt-rev": "~0.1.0",
"grunt-autoprefixer": "~0.5.0",
"grunt-usemin": "~2.0.0",
"grunt-modernizr": "~0.4.0",
"grunt-newer": "~0.6.0",
"grunt-svgmin": "~0.2.0",
"grunt-slim": "~0.1.0",
"grunt-concurrent": "~0.4.0",
"load-grunt-tasks": "~0.2.0",
"time-grunt": "~0.2.0",
"jshint-stylish": "~0.1.3"
},
"engines": {
"node": ">=0.8.0"
}
}
_bower.json：
{
"name": "<%= _.slugify(projectName) %>",
"version": "0.0.0",
"dependencies": {
"bower-foundation": ">= 4.0.0",
"modernizr": "~2.6.2"
}
}
【问题讨论】：