Yeoman生成器使用苗条模板
我一直在尝试编写基于默认webapp的自己的生成器,但它非常混乱,文档是非常可怕的,在解释初学者的过程。我试图得到的是能够写出苗条的模板,并让生成器将它们转换为hmtl。我尝试用grunt-slim软件包做这件事,但到目前为止还没有完成。如果有人有任何点击,这将不胜感激。Yeoman生成器使用苗条模板
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"
}
}
我约你,但我一直在用玉来代替Slim上运行同一个地方。我的方法是从Yeoman退出一段时间,并开始创建一个Gruntfile来完成我想要的任务。一旦到位,以Yeoman生成器的方式工作就非常简单。
试试这个,如果你喜欢:
繁重的超薄任务取决于宝石和宝石渺茫。首先,确保已安装了ruby(在终端中输入ruby -v
),然后安装超薄宝石(在终端中输入gem install slim
)。
要使用Grunt,您需要在项目的根目录下创建2个文件目录 - 一个'package.json'文件,用于存储关于该项目的元数据以及一个用于加载Grunt插件和配置任务的'Gruntfile.js'。
'package.json'文件很简单 - 在终端中输入npm init
并回答出现的问题。要安装Grunt插件并将它们输入到'package.json'文件中,请在终端中输入npm install <package name> --save-dev
。
所以创建一个基本“的package.json”文件的测试项目进入:
npm init
npm install grunt --save-dev
npm install grunt-slim --save-dev
然后,你需要创建一个Gruntfile.js。这里是最基本的一种可能,只是将'index.slim'文件编译为'index.html'。
module.exports = function(grunt) {
// configure the tasks
grunt.initConfig({
slim: { // the task name
dist: { // a specific target for the task - it could be called anything
files: {
'index.html': 'index.slim' // a dictionary that maps 'destination': 'source'
}
}
}
});
grunt.loadNpmTasks('grunt-slim');
grunt.registerTask('default', ['slim']);
}
现在尝试建立在你的项目的根的“index.slim”文件,并在终端中输入命令grunt
...它应该编译成HTML。
有关于与文件繁重的网站上工作(所以你可以做更复杂的事情不是我做了什么)一些有用的信息: http://gruntjs.com/configuring-tasks#files
这里是写一个构建脚本与咕噜明确的教程: http://www.sitepoint.com/writing-awesome-build-script-grunt/
我希望有帮助。如果您对Yeoman Jade发电机感兴趣,Yeoman社区发电机网站上有一个工作得很好。
编辑---- 我在Grunt命令行界面安装的假设下写了这个。它作为Yeoman的一个组件安装,或单独使用npm install -g grunt-cli