УСТАНОВКА npm install -g yo npm install -g grunt-cli npm install -g bower

sudo npm install -g yo sudo npm install -g grunt-cli sudo npm install -g bower

ПОИСК ГЕНЕРАТОРА http://yeoman.io/generators/

npm search yeoman-generator

УСТАНОВКАГЕНЕРАТОРА

npm install -g generator-webapp

ИСПОЛЬЗОВАНИЕ yo webapp

app/ node_modules/ test/ .bowerrc .editorconfig .gitattributes .gitignore .jshintrc bower.json Gruntfile.js package.json

СУБГЕНЕРАТОРЫ yo angular-fullstack:controller yo angular-fullstack:decorator yo angular-fullstack:directive

PACKAGE.JSON{ "name": "webapp-test", "dependencies": {}, "devDependencies": { "apache-server-configs": "̂2.7.1", "grunt": "̂0.4.5", "grunt-autoprefixer": "̂1.0.0", "grunt-concurrent": "̂0.5.0", "grunt-contrib-clean": "̂0.6.0", "grunt-contrib-concat": "̂0.5.0", "grunt-contrib-connect": "̂0.8.0", "grunt-contrib-copy": "̂0.5.0", }, "engines": { "node": ">=0.10.0" }}

BOWER.JSON{ "name": "webapp-test", "private": true, "dependencies": { "bootstrap": "~3.2.0" }}

ДОБАЛЕНИЕ ЗАВИСИМОСТЕЙ npm install npm instal grunt-contrib-copy --save-dev npm install express --save

bower install bower install jquery --save

GRUNTFILEmodule.exports = function(grunt) { grunt.initConfig({ concat: { main: { src: [ 'js/libs/jquery.js', 'js/mylibs/**/*.js' // Все JS-файлы в папке ], dest: 'build/scripts.js' } }, uglify: { main: { files: { 'build/scripts.min.js': '<%= concat.main.dest %>' } } } });

grunt.loadNpmTasks('grunt-contrib-concat'); grunt.loadNpmTasks('grunt-contrib-uglify');

grunt.registerTask('default', ['concat', 'uglify']);};

ЗАПУСК grunt # Задача default grunt concat # Задача concat grunt concat:main # Подзадача concat:main

СВОЙ ГЕНЕРАТОР mkdir generator-name cd generator-name npm init

{ "name": "generator-name", "version": "0.1.0", "description": "", "keywords": ["yeoman-generator"], "dependencies": { "yeoman-generator": "̂0.17.3" } }

СТРУКТУРА ├───package.json ├───app/ │ └───index.js └───router/ └───index.js

├───package.json └───generators/ ├───app/ │ └───index.js └───router/ └───index.js

yo name yo name:router

GENERATOR-GENERATOR npm install -g generator-generator

yo generator yo generator:subgenerator NAME

INDEX.JS var generators = require('yeoman-generator');

module.exports = generators.Base.extend();

var generators = require('yeoman-generator');

module.exports = generators.NamedBase.extend();

INDEX.JS module.exports = generators.Base.extend({ method1: function () { console.log('method 1 just ran'); }, method2: function () { console.log('method 2 just ran'); } });

ЗАПУСК npm link yo name

yo name:subname

RUN LOOP generators.Base.extend({ priorityName: function () {} });

generators.Base.extend({ priorityName: { method: function () {}, method2: function () {} } });

RUN LOOP1. initializing 2. prompting

3. configuring 4. default

5. writing 6. conflicts

7. install 8. end

0. constructor

PROMTS

this.prompt([{ type: 'input', name: 'dirname', message : 'Message to user', default : 'public' },{ type: 'input', name: 'name', message : 'What is your name?', default : '' }], function (answers) { this.answers = answers; done(); }.bind(this));

ARGUMENTS

module.exports = generators.Base.extend({ constructor: function () { generators.Base.apply(this, arguments);

this.argument('appname', { type: String, required: true //{ type: String, required: true, optional: false, // defaults:'myApp', desc:'', banner:'' }

// this.appname; } });

yo webapp my-project

OPTIONS

module.exports = generators.Base.extend({ constructor: function () { generators.Base.apply(this, arguments);

this.option('coffee', {}); // { desc: '', type: 'Boolean', // defaults: 'false', hide: 'false'}

// this.options.coffee } });

yo webapp --coffee

ВЫВОД

module.exports = generators.Base.extend({ myAction: function () { this.log('Something has gone wrong!'); } });

РАБОТА С ФАЙЛАМИ generators.Base.extend({ writing: function () { this.fs.copy('package.json', 'package.json'); this.fs.copyTpl( this.templatePath('index.html'), this.destinationPath('public/index.html'), { title: 'Templating with Yeoman' } ); this.write('config.json', JSON.stringify(this.answers, null, 2)); } });

РАБОТА С ФАЙЛАМИ <html> <head> <title><%= title %></title> </head> </html>

<html> <head> <title>Templating with Yeoman</title> </head> </html>

GRUNTFILE module.exports = generators.Base.extend({ writing: function () { this.gruntfile.insertConfig("compass", "{ watch: { watch: true } }"

this.gruntfile.registerTask('build', 'compass');

} });

GRUNTFILE grunt.initConfig({ compass: { watch: { watch: true } } });

grunt.registerTask('build', ['compass']);

http://yeoman.io/generators/

                https://github.com/yeoman/generator-webapp

               https://github.com/yeoman/generator-angular

                https://github.com/yeoman/generator-backbone

    https://github.com/newtriks/generator-react-

webpack

            https://github.com/yeoman/generator-mobile

    https://github.com/Thomas-Lebeau/generator-

bootstrap-less

Web App

AngularJS

Backbone

React-Webpack

Mobile App

Bootstrap LESS

http://gruntjs.com/

    https://github.com/gruntjs/grunt-contrib-concat

        https://github.com/gruntjs/grunt-contrib-copy

      https://github.com/gruntjs/grunt-contrib-uglify

      https://github.com/gruntjs/grunt-contrib-jshint

     https://github.com/gruntjs/grunt-contrib-watch

        https://github.com/jharding/grunt-exec

concat

copy

uglify

jshint

watch

exec

var gulp = require('gulp'); var uglify = require('gulp-uglify');

gulp.task('scripts', function() { gulp.src(['client/js/**/*.js', '!client/js/vendor/**']) .pipe(uglify()) .pipe(gulp.dest('build/js'));

// Копируем скрипты поставщика gulp.src('client/js/vendor/**') .pipe(gulp.dest('build/js/vendor')); });

gulp.task('default', function() { gulp.run('scripts');

gulp.watch('client/js/**', ['scripts'], function(e) { // do something there }); });

ВОПРОСЫ