28.03.15. Одесса. Impact Hub Odessa. Конференция JSLab. Грибанов Александр. "Yeoman - избавляемся от рутинных задач" В докладе пойдет речь о современных средствах автоматизации web разработки, начиная от создания структуры проекта и заканчивая разворачиваем приложения. Рассмотрим популярные генераторы приложений и вы узнаете как написать свой Затронем тему Grunt и Gulp, разберемся в чем разница Подробнее: http://geekslab.co/ https://www.facebook.com/GeeksLab.co https://www.youtube.com/user/GeeksLabVideo

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

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

4. УСТАНОВКА
ГЕНЕРАТОРА
npm install -g generator-webapp

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

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

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

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

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

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

12. 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']);
};

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

14. СВОЙ ГЕНЕРАТОР
mkdirgenerator-name
cdgenerator-name
npminit

15. {
"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

17. yoname
yoname:router

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

19. INDEX.JS
vargenerators=require('yeoman-generator');
module.exports=generators.Base.extend();
vargenerators=require('yeoman-generator');
module.exports=generators.NamedBase.extend();

20. INDEX.JS
module.exports=generators.Base.extend({
method1:function(){
console.log('method1justran');
},
method2:function(){
console.log('method2justran');
}
});

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

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

23. RUN LOOP
1. initializing 2. prompting
3. configuring 4. default
5. writing 6. conflicts
7. install 8. end
0. constructor

24. 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));

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

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

27. ВЫВОД
module.exports=generators.Base.extend({
myAction:function(){
this.log('Somethinghasgonewrong!');
}
});

28. РАБОТА С ФАЙЛАМИ
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));
}
});

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

30. GRUNTFILE
module.exports=generators.Base.extend({
writing:function(){
this.gruntfile.insertConfig("compass","{watch:{watch:tru
this.gruntfile.registerTask('build','compass');
}
});

31. GRUNTFILE
grunt.initConfig({
compass:{
watch:{watch:true}
}
});
grunt.registerTask('build',['compass']);

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

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

34. vargulp=require('gulp');
varuglify=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'));
});

35. gulp.task('default',function(){
gulp.run('scripts');
gulp.watch('client/js/**',['scripts'],function(e){
//dosomethingthere
});
});

36. ВОПРОСЫ