gulp まとめ

$ npm install –save gulp $ npm install –save gulp-coffee gulp-concat // gulpfile.js var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); // CoffeeScript gulp.task('coffee', function() { return gulp.src('coffee/*.coffee) .pipe(coffee()) .pipe(concat('main.js')) .pipe(gulp.dest('js/')) }); // デフォルトタスク gulp.task('default', [ 'coffee' ]); $ gulp coffee $ gulp coffee sass // gulp watch and gulp-uglify(gulpfile.js) var gulp = require('gulp'); var coffee = require('gulp-coffee'); var concat = require('gulp-concat'); var compass = require('gulp-compass'); var watch = require('gulp-watch'); var uglify = require("gulp-uglify"); gulp.task('coffee', function() { return gulp.src('coffee/*.coffee') .pipe(coffee()) .pipe(concat('main.js')) .pipe(gulp.dest('js/')) }); gulp.task("compass", function() { return gulp.src("scss/*.scss") .pipe(compass({ config_file: './config.rb', css: 'css', sass: 'scss' })) .pipe(gulp.dest("css/")) }); gulp.task("js", function() { gulp.src(["js/*.js"]) .pipe(uglify()) .pipe(gulp.dest("./js/min")); }) gulp.task('watch', function () { gulp.watch('coffee/*.coffee', function() { gulp.start(['coffee']); }); gulp.watch('scss/*.scss', function() { gulp.start(['compass']); }); })

今日の晩御飯

パスタと焼き肉 直太朗ニキ

CSS その他

レガシーブラウザの対応 ・プログレッシブ・エンハンスメント レガシーブラウザを基準に新しい機能をサポートしているブラウザによリリッチな体験を提供する ・グレースフルデグラデーション モダンブラウザを基準に古いブラウザには必要最低限の機能を提供する ・ポリフィル 標準ではサポートしていない機能をJavaScriptのライブラリなどを使用してサポートさせる手法 例) html5shiv.js Respond.js perspective ・Web フォント http://fonts.com/ja https://typekit.com https://typesquare.com モリサワ http://webfont.fontplus.jp ・アイコンフォント http://zurb.com/playground/foundation-icon-fonts-3 https://www.entypo.com http://fontello.com ・アニメーション transition: 2s; transition-duration: 2s; transition-delay: 1s; transition-property: background-color; transition-timing-function: ease-in; http://matthewlein.com/ceaser/ ショートハンド transition: background-color 2s ease-in 1s; ・キーフレームアニメーション @keyframes anime { 0% { transform: scaleY(1); background-color: orange; } 50% { transform: scale(1.4); background-color: yellow green; } 100% { transform: scale(1); background-color: aqua; } } .box { animation-name: anime; animation-duration: 2s; } animation-timing-function: ease-in animation-iteration-count: infinite; animation-direction: alternate; (再生方向) animation-fill-mode: forwards; animation-play-state: (再生状態)(running or paused); アニメーションのショートハンド animation: アニメーション名 再生時間 イージング 再生までの時間 再生回数 再生方向 再生前後の表示 再生状態; ...

誕生日ディナー

37歳のディナー ありがとう家内。 姫ネキと直太朗ニキ

今日の晩御飯

シンガポールチキンライス

今日の晩御飯

オムライス

今日の晩御飯

いろいろ

今日の晩御飯

そうめんとトンテキ

今日の晩御飯

チャーハンと唐揚げと麻婆豆腐

今日の晩御飯

たらこパスタとトンテキ