Стажировка-2015. Занятие 13. Сборка фронтенда

1. Сборка фронта

2. Зачем?

3. Зачем?
● Префиксы в CSS
● Инлайн картинок и шрифтов в CSS
● Собрать CSS и JS
● Сжать CSS и JS

4. Какие бывают?

5. Gulp
Grunt
Browserify
Webpack

6. Browserify

7. Browserify
npm install -g browserify

8. Browserify
● Объединение JS через require()
● Использование npm-библиотек в браузере
● Компиляторы CoffeeScript и т.п.

9. Browserify
require('underscore');
module.exports = function() {
...
}

10. Browserify
browserify src/index.js -o assets/out.js -d

11. Webpack

12. Webpack
npm install webpack -g
npm install webpack --save-dev

13. Webpack
webpack src/index.js assets/out.js

14. Webpack
webpack.config.js:
module.exports = {
entry: "./index.js",
output: {
path: __dirname,
filename: "out.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style!css" }
]
}
};

15. Webpack
WATCH MODE:
webpack --progress --colors --watch

16. Grunt

17. Grunt
npm install -g grunt-cli
npm install grunt --save-dev

18. Grunt
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */n'
},
build: {
src: 'src/<%= pkg.name %>.js',
dest: 'build/<%= pkg.name %>.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};

19. Grunt: проблемы
● Запись на диск каждого шага
● Для каждого шага компиляции нужно указывать
файлы

20. Gulp

21. Gulp
$ npm install --global gulp
$ npm install --save-dev gulp

22. Gulp
var gulp = require('gulp');
gulp.task('default', function() {
...
});

23. Gulp
var postcss = require('gulp-postcss');
gulp.task('css', function () {
return gulp.src('src/**/*.css')
.pipe( postcss([...]) )
.pipe( gulp.dest('build/') );
});

24. Gulp
● Запись на диск только в самом конце
● Шаги могут идти параллельно
Gulp быстрее до 2-х раз

25. Плагины для Gulp

26. Browsersync

27. Browsersync
npm install browser-sync gulp --save-dev

28. Browsersync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});

29. gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
gulp.task('browser-sync', function() {
browserSync.init({
proxy: "yourlocal.dev"
});
});
var gulp = require('gulp');
var browserSync = require('browser-sync').create();

30. PostCSS

31. Что умет postcss?

32. Ничего

33. Всё делают плагины

34. Что умеет Sass?

35. Переменные: Sass
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

36. Переменные: postcss-simple-vars
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}

37. Вложенность: Sass
nav {
ul {
margin: 0;
padding: 0;
}
li { display: inline-block }
}

38. Вложенность: postcss-nested
nav {
ul {
margin: 0;
padding: 0;
}
li { display: inline-block }
}

39. Вложенность: postcss-nested
.phone {
&_title {
width: 500px;
body.is_dark & { color: white; }
}
img { width: 500px; }
}

40. Вложенность: postcss-nested
.phone_title { width: 500px; }
body.is_dark .phone_title { color: white; }
.phone img { width: 500px; }

41. Миксины: Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius; }
.box { @include border-radius(10px) }

42. Миксины: postcss-mixins
@define-mixin border-radius $radius {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius; }
.box { @mixin border-radius 10px; }

43. Миксины: postcss-mixins
@define-mixin icon $network, $color: blue {
.icon.is-$(network) {
color: $color;
@mixin-content; }
.icon.is-$(network):hover { color: white; }
}
@mixin icon twitter { background: url(twt.png); }

44. Миксины: postcss-mixins
.icon.is-twitter {
color: blue;
background: url(twt.png);
}
.icon.is-twitter:hover {
color: white;
}

45. Наследование: Sass
.message {
border: 1px solid #ccc;
color: #333; }
.success {
@extend .message;
border-color: green; }

46. Наследование: postcss-simple-extend
@define-placeholder message {
border: 1px solid #ccc;
color: #333; }
.success {
@extend .message;
border-color: green; }

47. Операторы: Sass
.container {
width: 600px / 960px * 100%;
}

48. Операторы: postcss-calc
.container {
width: calc(600px / 960px * 100%);
}

49. Импорт: Sass
// _reset.scss
htm, body { margin: 0; }
/* base.scss */
@import ‘reset’;
body { background-color: #efefef; }
...

50. Импорт: postcss-import
// _reset.css
htm, body { margin: 0; }
/* base.css */
@import ‘reset.css’;
body { background-color: #efefef; }
...

51. Импорт: postcss-import
@import ‘reset’;
@import ‘css/foo.css’; (min-width: 25em)
body { background-color: #efefef; }
...

52. Импорт: postcss-import
/* content of ./node_modules/foo/index.css */
@media(min-width: 25em) {
/* content of bar.css */
}
body { background-color: #efefef; }
...

53. что еще?

54. Autoprefixer
:fullscreen a {
display: flex;
}

55. Autoprefixer
:-webkit-full-screen a {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
:-moz-full-screen a {
display: flex;
}
:-ms-fullscreen a {
display: -ms-flexbox;
display: flex;
}
:fullscreen a {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}

56. postcss-assets
var options = { loadPaths:['media/img/', 'images/'] }
body {
background: resolve(‘foobar.jpg’);
background: resolve(‘icons/baz.png’);
}

57. postcss-assets
body {
background: resolve(‘/media/img/foobar.jpg’);
background: resolve(‘/images/icons/baz.png’);
}

58. postcss-assets
body {
width: width(‘/images/foobar.png’);
height: height(‘/images/foobar.png’);
background-size: size(‘/images/foobar.png’);
}

59. postcss-assets
body {
width: 320px;
height: 240px;
background-size: 320px 240px;
}

60. postcss-assets
body {
width: width(‘images/foobar.png’, 2);
height: height(‘images/foobar.png’, 2);
background-size: size(‘images/foobar.png’, 2);
}

61. postcss-assets
body {
width: 160px;
height: 120px;
background-size: 160px 120px;
}

62. postcss-assets
body {
background: inline(‘images/foobar.png’);
}

63. Отзеркаливание: RTLCSS

64. PostCss
Более 90 плагинов

65. Скорость?

66. Парсинг CSS

67. Парсинг и д.р.

68. Плюсы
● Скорость
● Больше функций
● Расширяемость

69. Используем в Gulp
var postcss = require('gulp-postcss');
gulp.task('compile:css', function () {
return gulp.src('src/*.css')
.pipe( postcss([plugin1, plugin2, plugin3]) )
.pipe( gulp.dest('dist') );
});

70. Спасибо за внимание