Más contenido relacionado
La actualidad más candente (6)
Similar a Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда (20)
Стажировка-2015. Разработка. Занятие 13. Сборка фронтенда
- 3. Зачем?
● Префиксы в CSS
● Инлайн картинок и шрифтов в CSS
● Собрать CSS и JS
● Сжать CSS и JS
- 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']);
};
- 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-х раз
- 28. Browsersync
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
browserSync.init({
server: {
baseDir: "./"
}
});
});
- 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); }
- 52. Импорт: postcss-import
/* content of ./node_modules/foo/index.css */
@media(min-width: 25em) {
/* content of bar.css */
}
body { background-color: #efefef; }
...
- 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’);
}
- 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') );
});