Automated css
?
8 likes?8,842 views
CSS周りにおける自動化手法とツールの紹介をしました。 実際のソースコード -> https://github.com/frontainer/autocss GulpとPostCSSを活用してCSS周りで自動化できるところを自動化してしまおうという内容です。 「書籍『最強のCSS設計』出版記念イベント＆勉強会 ― CSS設計、チーム開発を成功させるために必要なこと」(https://atnd.org/events/71753) 登壇資料です。
![var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var postcss = require('gulp-postcss');
var csso = require('gulp-csso');
gulp.task('default', function () {
return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-13-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-15-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-19-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-24-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-27-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-29-320.jpg)
![return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-30-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-33-320.jpg)
![//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
.pipe(sassLint.failOnError())
.pipe(sass())
.pipe(postcss([
require('doiuse')({browsers: browsers,ignore:['transforms2d']}),
require('autoprefixer')({browsers: browsers}),
require('css-mqpacker')
]))
.pipe(csso())
.pipe(gulp.dest('dest'));
});
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-37-320.jpg)
![var gulp = require('gulp');
var sass = require('gulp-sass');
var sassLint = require('gulp-sass-lint');
var postcss = require('gulp-postcss');
var csso = require('gulp-csso');
gulp.task('default', function () {
return gulp.watch('*.scss',['css']);
});
var browsers = [
//'last 2 versions',
//'ie >= 9',
'> 3%'
];
gulp.task('css', function () {
return gulp.src('*.scss')
.pipe(sassLint())
.pipe(sassLint.format())
gulpfile.js](https://image.slidesharecdn.com/automatedcss-151118112616-lva1-app6892/85/Automated-css-40-320.jpg)
Automated css
- 1. A u t o m a t e d C S S
- 2. @frontainer CTO Front-end Engineer 林?優一 株式会社LIG - CTO （フロントエンドチームリーダー) AngularJS Japan User Group フロントエンド開発?フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitで スピーカーを務める。得意言語はJavaScript。 2015年6月にフロントエンドチームリーダー兼務のままCTO就任。 自社開発チームのエンジニアとしても活動。
- 3. - CSSのインデントや記述の仕方がバラバラ - パフォーマンス?チューニング？？ - ベンダープレフィックスなんてとりあえず全部つけておけばいいだろう！ - 圧縮を納品前にやって、圧縮したら崩れた
- 4. A u t o m a t e d C S S
- 5. - 常に同じ動作をするために、共通の書式が保てる - 人がやる作業が減るので制作に専念できる - そもそも人がやるには大変过ぎる作业が随时できる
- 6. L e t ’ s t r y ! ! h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / a u t o c s s
- 7. N o d e . j s h t t p s : / / n o d e j s . o r g / e n /
- 10. G u l p . j s h t t p : / / g u l p j s . c o m /
- 11. $ npm i gulp -g
- 12. $ npm i gulp-sass --save-dev $ npm i gulp-sass-lint --save-dev $ npm i gulp-csso --save-dev $ npm i gulp-postcss --save-dev $ npm i autoprefixer --save-dev $ npm i doiuse --save-dev $ npm i css-mqpacker --save-dev
- 13. var gulp = require('gulp'); var sass = require('gulp-sass'); var sassLint = require('gulp-sass-lint'); var postcss = require('gulp-postcss'); var csso = require('gulp-csso'); gulp.task('default', function () { return gulp.watch('*.scss',['css']); }); var browsers = [ //'last 2 versions', //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) gulpfile.js
- 14. g u l p - s a s s h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - s a s s
- 15. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 17. $font-size: 30px; $link-color: #ff290e; .test { .test-heading { font-size: 20px; font-weight: bold; } .test-content { padding: 10px 10px 10px 10px; } } .test .test-heading { font-size: 30px; font-weight: 700; } .test .test-content { padding: 10px 10px 10px 10px; }
- 18. g u l p - s a s s - l i n t h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - s a s s - l i n t
- 19. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 20. files: include: '**/*.scss' options: formatter: stylish merge-default-rules: false rules: border-zero: - 1 - convention: zero brace-style: - 1 - allow-single-line: true clean-import-paths: - 1 - filename-extension: false leading-underscore: false empty-line-between-blocks: - 0 - ignore-single-line-rulesets: true extends-before-declarations: 1 .sass-lint.yml
- 21. R u l e s h t t p s : / / g i t h u b . c o m / s a s s t o o l s / s a s s - l i n t / t r e e / m a s t e r / d o c s / r u l e s
- 23. g u l p - c s s o h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - c s s o
- 24. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 25. $font-size: 30px; $link-color: #ff290e; .test { .test-heading { font-size: 20px; font-weight: bold; } .test-content { padding: 10px 10px 10px 10px; } } .test .test-heading { font-size: 30px; font-weight: 700; } .test .test-content { padding: 10px 10px 10px 10px; } .test .test-heading{font-size:30px;font-weight:700}.test .test-content{padding:10px}
- 26. g u l p - p o s t c s s h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / g u l p - p o s t c s s
- 27. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 28. A u t o P r e f i x e r h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / a u t o p r e f i x e r
- 29. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 30. return gulp.watch('*.scss',['css']); }); var browsers = [ //'last 2 versions', //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) gulpfile.js
- 31. a { &:hover { transform: scale(1.2); } } a:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}
- 32. D o I U s e h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / d o i u s e
- 33. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 34. a { &:hover { transform: scale(1.2); filter: blur(10px); } } a:hover{-webkit-transform:scale(1.2);transform:scale(1.2); -webkit-filter:blur(10px);filter:blur(10px)}
- 36. c s s - m q p a c k e r h t t p s : / / w w w . n p m j s . c o m / p a c k a g e / c s s - m q p a c k e r
- 37. //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso()) .pipe(gulp.dest('dest')); }); gulpfile.js
- 38. @media screen and (max-width:800px) { .test { width: 100px; } } @media screen and (max-width:800px) { .test2 { width: 200px; } } @media screen and (max-width:800px){.test{width:100px}.test2{width:200px}}
- 39. W a t c h i n g
- 40. var gulp = require('gulp'); var sass = require('gulp-sass'); var sassLint = require('gulp-sass-lint'); var postcss = require('gulp-postcss'); var csso = require('gulp-csso'); gulp.task('default', function () { return gulp.watch('*.scss',['css']); }); var browsers = [ //'last 2 versions', //'ie >= 9', '> 3%' ]; gulp.task('css', function () { return gulp.src('*.scss') .pipe(sassLint()) .pipe(sassLint.format()) gulpfile.js
- 42. T o d a y ’ s E n v i r o n m e n t h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / a u t o c s s
- 43. F u l l V e r s i o n h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / f r o n t p l a t e h t t p s : / / g i t h u b . c o m / f r o n t a i n e r / f r o n t p l a t e / t r e e / d e v e l o p β V e r s i o n
- 44. T h a n k y o u @frontainer