Александр Грибанов, Senior Java Script developer

2. УСТАНОВКА
npminstall-gyo
npminstall-ggrunt-cli
npminstall-gbower
sudonpminstall-gyo
sudonpminstall-ggrunt-cli
sudonpminstall-gbower

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

4. УСТАНОВКА
ГЕНЕРАТОРА
npminstall-ggenerator-webapp

5. ИСПОЛЬЗОВАНИЕ
yowebapp

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

7. СУБГЕНЕРАТОРЫ
yoangular-fullstack:controller
yoangular-fullstack:decorator
yoangular-fullstack:directive

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

9. 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"
}
}

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

11. ДОБАЛЕНИЕ ЗАВИСИМОСТЕЙ
npminstall
npminstalgrunt-contrib-copy--save-dev
npminstallexpress--save
bowerinstall
bowerinstalljquery--save

13. GRUNTFILE
module.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']);
};

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

15. СВОЙ ГЕНЕРАТОР
mkdirgenerator-name
cdgenerator-name
npminit
{
"name":"generator-name",
"version":"0.1.0",
"description":"",
"keywords":["yeoman-generator"],
"dependencies":{
"yeoman-generator":"^0.17.3"
}
}

16. ФАЙЛОВАЯ СТРУКТУРА
├───package.json
├───app/
│ └───index.js
└───router/
└───index.js
├───package.json
└───generators/
├───app/
│ └───index.js
└───router/
└───index.js
yoname
yoname:router

17. GENERATOR-GENERATOR
npminstall-ggenerator-generator
yogenerator
yogenerator:subgeneratorNAME

18. INDEX.JS
vargenerators=require('yeoman-generator');
module.exports=generators.Base.extend();
vargenerators=require('yeoman-generator');
module.exports=generators.NamedBase.extend();
module.exports=generators.Base.extend({
method1:function(){
console.log('method1justran');
},
method2:function(){
console.log('method2justran');
}
});

19. ЗАПУСК
npmlink
yoname
yoname:subname

20. RUN LOOP
generators.Base.extend({
priorityName:function(){}
});
generators.Base.extend({
priorityName:{
method:function(){},
method2:function(){}
}
});
1. initializing 2. prompting
3. configuring 4. default
5. writing 6. conflicts
7. install 8. end
0. constructor

21. ВЗАИМОДЕЙСТВИЕ С
ПОЛЬЗОВАТЕЛЕМ
PROMTS
this.prompt([{
type:'input',
name:'dirname',
message:'Messagetouser',
default:'public'
},{
type:'input',
name:'name',
message:'Whatisyourname?',
default:''
}],function(answers){
this.answers=answers;
done();
}.bind(this));

22. ВЗАИМОДЕЙСТВИЕ С
ПОЛЬЗОВАТЕЛЕМ
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;
}
});
yowebappmy-project

23. ВЗАИМОДЕЙСТВИЕ С
ПОЛЬЗОВАТЕЛЕМ
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
}
});
yowebapp--coffee

24. ВЗАИМОДЕЙСТВИЕ С
ПОЛЬЗОВАТЕЛЕМ
ВЫВОД
module.exports=generators.Base.extend({
myAction:function(){
this.log('Somethinghasgonewrong!');
}
});

25. РАБОТА С ФАЙЛАМИ
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:'TemplatingwithYeoman'}
);
this.write('config.json',JSON.stringify(this.answers,null,2));
}
});
<html>
<head>
<title><%=title%></title>
</head>
</html>
<html>
<head>
<title>TemplatingwithYeoman</title>
</head>
</html>

26. GRUNTFILE
module.exports=generators.Base.extend({
writing:function(){
this.gruntfile.insertConfig("compass","{watch:{watch:true}}");
this.gruntfile.registerTask('build','compass');
}
});
grunt.initConfig({
compass:{
watch:{watch:true}
}
});
grunt.registerTask('build',['compass']);

27. 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/yeoman/generator-ember
https://github.com/yeoman/generator-mobile
https://github.com/Thomas-Lebeau/generator-
bootstrap-less
Web App
AngularJS
Backbone
Ember
Mobile App
Bootstrap LESS

28. 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

29. vargulp=require('gulp');
varuglify=require('gulp-uglify');
gulp.task('scripts',function(){
//МинифицируемикопируемвсеJavaScriptфайлы,
//кромескриптовпоставщика
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`
gulp.task('default',function(){
gulp.run('scripts');
//Отслеживаемфайлы,ипоихизменению,запускаемзадачу
gulp.watch('client/js/**',function(event){
gulp.run('scripts');
});
});