JSLab. Грибанов Александр. "Yeoman - избавляемся от рутинных...
-
Upload
geekslab -
Category
Technology
-
view
191 -
download
2
Transcript of JSLab. Грибанов Александр. "Yeoman - избавляемся от рутинных...
УСТАНОВКА 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 }); });
ВОПРОСЫ