automated css
TRANSCRIPT
A u t o m a t e d C S S
@frontainer
CTO Front-end Engineer
林 優一
株式会社LIG - CTO （フロントエンドチームリーダー)
AngularJS Japan User Group
フロントエンド開発・フロントエンドエンジニア育成を担当し デザイン分野からサーバーサイド分野まで幅広く対応。 AngularJSのコミュニティに所属し、ng-mtgやDevelopers Summitでスピーカーを務める。得意言語はJavaScript。
2015年6月にフロントエンドチームリーダー兼務のままCTO就任。 自社開発チームのエンジニアとしても活動。
- CSSのインデントや記述の仕方がバラバラ
- パフォーマンス・チューニング？？
- ベンダープレフィックスなんてとりあえず全部つけておけばいいだろう！
- 圧縮を納品前にやって、圧縮したら崩れた
A u t o m a t e d C S S
- 常に同じ動作をするために、共通の書式が保てる
- 人がやる作業が減るので制作に専念できる
- そもそも人がやるには大変過ぎる作業が随時できる
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
N o d e . j sh t t p s : / / n o d e j s . o r g / e n /
$ npm i gulp -g
$ 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
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
g u l p - s a s sh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
$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; }
g u l p - s a s s - l i n th 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
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
R u l e sh 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
g u l p - c s s oh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
$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}
g u l p - p o s t c s sh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
A u t o P r e f i x e rh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
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()) .pipe(sassLint.failOnError()) .pipe(sass()) .pipe(postcss([ require('doiuse')({browsers: browsers,ignore:['transforms2d']}), require('autoprefixer')({browsers: browsers}), require('css-mqpacker') ])) .pipe(csso())
gulpfile.js
a { &:hover { transform: scale(1.2); } }
a:hover{-webkit-transform:scale(1.2);transform:scale(1.2)}
D o I U s eh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
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)}
c s s - m q p a c k e rh 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
//'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') ])) .pipe(csso()) .pipe(gulp.dest('dest')); });
gulpfile.js
@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}}
W a t c h i n g
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
T o d a y ’ s E n v i r o n m e n th 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
F u l l V e r s i o nh 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
