Home > Developer > Web Develop
Compile your own yeoman generator and yeomangenerator
When building a front-end project, using yeoman generator can help us complete repetitive operations such as creating files, installing modules, and class libraries. However, existing generator sometimes cannot meet our needs, so you can use yeoman's API to build your own generator.
This section describes the general steps for customizing generator.
1. $ npm install-g generator-generator
2. $ yo generator
Enter your github user name and generator name (note that yoeman will add the prefix generator for your input name)
Take a look at the generated file directory structure:
3. Compile generator
The file we need to write is mainly app/index. js. Check the content of the index file:
'Use strict '; var util = require ('util ');... var MygeneratorGenerator = yeoman. generators. base. extend ({init: function () {// initialization module ...}, askFor: function (){...}, app: function (){...}, projectfiles: function (){...}}); module. exports = MygeneratorGenerator;
The function body is omitted here, so that you can see the file structure clearly.
Note the following points when writing this index. js:
* Module. exports
* Inherit yeoman. generators. Base
* When you execute yo mygenerator, all the methods in the module are sequentially executed (namely init (), aksFor (), app (), and projectfiles ), if you want to add a private method (for calling other methods), you can easily add an underline before the method name, as shown in figure
_protectedMethod: function() { console.log('This is a protected function.');}
Let's take a simple example to introduce several basic APIs. The result of the example generator is to generate a project with livereload configured for gulp.
Complete index. js file code
'Use strict '; var util = require ('util'); var path = require ('path'); var yeoman = require ('yeoman-generator '); var yosay = require ('yosay'); var chalk = require ('chalk '); var MygeneratorGenerator = yeoman. generators. base. extend ({init: function () {this. pkg = require ('.. /package. json '); this. on ('end', function () {if (! This. options ['skip-install']) {this. installDependencies () ;}}) ;}, askFor: function () {var done = this. async (); // we recommend that you use this. log () instead of console. log, because the console is not in the command line environment. log () does not display this. log (yosay ('Hi Keith, this is a new generator! '); Var prompts = [{type: 'Confirm', name: 'someoption', message: 'Hello boy, wocould you like to enable this option? ', Default: true}]; this. prompt (prompts, function (props) {this. someOption = props. someOption; done ();}. bind (this);}, app: function () {// create directory this. mkdir ('app'); this. mkdir ('app/templates'); // this. copy () the first parameter is the source file name, the default directory is app/templates, and the second parameter is the target file this.copy('index.html ', 'app/index.html'); this. copy ('_ package. json ', 'package. json '); this. copy ('_ bower. json ', 'bower. json');}, gulp: function () {var done = this. async (); // install the gulp module, this. npmInstall () solves the module installation problem and only installs this for the same module once. npmInstall (['gulp', 'Gulp-connect '], {'savedev': true}, done); this. template ('gulpfile. js');}, projectfiles: function () {this. copy ('editorconfig ','. editorconfig '); this. copy ('jshintrc ','. jshintrc ') ;}}); module. exports = MygeneratorGenerator;
Index.html
<!DOCTYPE html>
This. template method is also used in the gulp method in index. js. You also need to create a template file gulpfils. js under the app/templates directory.Gulpfile. js (the file content is not described in detail here)
'use strict';var gulp = require('gulp'), connect = require('gulp-connect');gulp.task('default', ['clean'], function () { gulp.start('start');});gulp.task('server', function() { connect.server({ root: 'app', livereload: true }); gulp.watch(['app/*.html'], ['html']);});gulp.task('html', function() { gulp.src('app/*.html') .pipe(connect.reload());});gulp.task('start', function() { console.log('This is default task, Developing...');});gulp.task('clean', function() { console.log('cleaning...');});
Now, a basic generator has been compiled.
4. Use generator
After writing the generator, you can publish it to npm. It is used locally and executed in the root directory of generator.
$ npm linkNext we will execute the same command in any working directory as using other yeoman generator.
$ yo mygeneratorAfter the installation is complete, run cd to the root directory of the new project, and use the livereload function (modify the html file and save it, and then the browser automatically refreshes it) to execute
$ gulp serverAccess http: // localhost: 8080.
The process of building and using this basic generator has ended. For more APIs for custom generator, see the official documentation http://yeoman.github.io/generator/.
Build generator official tutorials http://yeoman.io/authoring/getting-started.html
How do I use OpenGL? I want to use a specific chip, such as 74LS163. How can I implement this chip in OpenGL? Only self-edited?Most of them are self-compiled. A small part of them can directly call the ip core that comes with the software. The methods for finding different ipcore software are different. quartus is included in the mega wizard option, ise is generated using core generator
Hello, when I write C, I see <HTML> <HEAD> <META NAME = "GENERATOR" Content = "Microsoft Developer Stu
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
