CSS Sprite を自動生成する - Gulp で作る Web フロントエンド開発環境 #8 | Recruit Tech Blog
Sass ( SCSS ) や Stylus といった CSS プリプロセッサを使う上で更に効率を高めるために Compass や Bourbon といった Sass ( SCSS ) のフレームワークを導入している方もたくさんいるかと思います。僕自身も SCSS を習得するとほぼ同時に Compass を愛用するようになりました。CSS のミニファイ化やベンダープレフィックス対応してくれる Mixin などとても多機能なのが魅力ですが、一方で動作が重くコンパイルに結構な時間が掛かる、Web ブラウザの CSS サポートが進むにつれて生成される CSS が冗長なものになりつつあるというのが気になるようになってきました。公式ブログを見る限り2014年8月に Ver.1.01 をリリースして以来メンテナンスされている様子もないことから1)Mac OS X - El Capitan では動作しな
開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました ｜https://wp.yat-net.com/name
2015年 09月 10日 開発に便利なタスクランナー「gulp」で出来る事、導入方法などをまとめました カテゴリ： gulp タグ：gulpタスクランナー タスクランナーの一つであるgulp（ガルプ）。使い出すとすごく便利で今ちょっと手放せない開発ツールの一つなんですが、使ってない人からすると、導入コストとか学習コストが気になって、まだ手を出してないという方もいますよね。なので、今回導入用の記事を書いたので、ちょっと気になってるという方、試してみたかったという方に役立てばいいなと思います。 1.タスクランナーとは？ gulpで何ができるのか？ 2.gulpに必要な環境を整える – Node.jsのインストール 3.gulpに必要な環境を整える – package.jsonの作成 4.gulpに必要な環境を整える – gulpfile.jsの作成 5.gulp-ejsを使った開発環境 6.
GulpでRollup - Qiita
"use strict"; var gulp = require('gulp'), rollup = require('gulp-rollup'), nodeResolve = require('rollup-plugin-node-resolve'), commonjs = require('rollup-plugin-commonjs'), rename = require('gulp-rename'), babel = require('rollup-plugin-babel'); gulp.task('rollup', function() { return gulp.src('./src/**/*.js') .pipe( rollup( { entry: './src/main.js', format: 'umd', moduleName: 'sample_module', //
Gulpで始めるwebpack 4入門 - Qiita
webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16（いちろく、ではなくじゅうろく）です。 ▲ webpackの公式サイト webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをimport()やrequire()を使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です。 webpack 4をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。 なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。 環境準備 Gul
僕なりのフロントエンド開発環境2017年版 - Qiita
2016年版を書いてからもう1年もたってさらに古くなってきたので、今の環境に合わせてバージョンアップ 僕なりのフロントエンド開発環境2016年版 - Qiita 僕なりのフロントエンド開発環境2016年版v2 - Qiita https://github.com/koh110/minjsapp 2016年版からのバージョンアップ点 webpackをv2に vendor.jsの切り出しかたをgulpからwebpackに gulpfileにあったwebpackのconfigをwebpack.config.jsに切り出し 環境変数にパスを切り出し webpackをv2に webpackのv2がついにリリースされたので移行。 古い環境はどんどんとおいていかれるのでなるべく早めにやったほうが最終的な移行コストは低くなると思います。 vendor.jsの切り出し方をgulpからwebpackに 今まで
gulpについて、いろいろググってみたけど、どうも情報がばらついていて、いいまとめサイトがないので作ってみた：仮 - Qiita
gulpについて、いろいろググってみたけど、どうも情報がばらついていて、いいまとめサイトがないので作ってみた：仮gulp gulpとは 本家はここ http://gulpjs.com/ 概要についてはここ gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの弱点を補うgulp.jsのインストールと使い方 (1/3) - ＠IT 大雑把に言いうと、js,cssファイルを圧縮したり、他の言語をコンパイルしたり、 ブラウザを勝手にリロードしてくれるサーバーを立ち上げたり、普段の作業を自働化するようにできるツール。 gulpfile.jsにいろんなタスクを記述し、ワンコマンドで呼び出しが可能。 http://gulpjs.com/ 普段使うであろう、絶対に押さえておきたいgulp API ここのセクションについては、 gulp.jsで始めるWeb開発爆速自動化入門：便利なGruntの
タスクランナーgulp.js最速入門 - id:anatooのブログ
相変わらず仕事ではデザインやりつつJavaScript書いている。 タスクランナーとしてGrunt.jsを使っていたけれども、使ううちに段々不満がでてきた。遅かったり、記述が冗長になりがちでつらかったので最近になってgulpに乗り換えた。 gulpは良い。タスクは自動的に並列に実行され、かつストリームで処理されるので速いし、タスクの記述もストリームベースの書き方のおかげでGrunt.jsに比べるとだいぶ短くなる。 ただ、そこらにあるgulpをちょっと試しただけの日本語の記事やドキュメントをみてても実際のプロジェクトで使えるレベルまでの知識を得られず学習に一日かかった。 この記事では、gulpをまともに使えるようになるまでに必要な知識を書く。 導入とHelloWorld まずは導入。npmからgulpをインストールする。 $ npm install gulp -g $ gulp -v [gu
Pug(Jade)で効率的なマークアップ環境を作る ｜ Tips Note by TAM
HTMLのコーディングをするとき、メタ情報やヘッダーのような共通部分を効率的に管理するためにPugというテンプレートエンジンをよく使っています。最初は「導入コストが高い」と考えていましたが、それ以上のメリットがあると感じるようになりました。 今回はPugのテンプレートを作ったので、その使い方を紹介します。 今回はPugの記法については細かく説明できませんので、詳しい仕様は公式サイトを確認してください。 Getting Started – Pug テンプレートエンジンとPugについて テンプレートエンジンというのは、特定の処理をおこなうテンプレートに表示させたいデータ（文字列やタグなど）を渡すことで、無駄なくHTMLを作成していく仕組みのことです。CSSにおけるSassのようなものと考えてもいいと思います。 今回使用するテンプレートエンジンのPugには以下のような特徴があります。 閉じタグ（
gulp.js その4 プラグイン一覧 - Qiita
gulpで使うプラグインやnpmモジュールをピックアップ 更新履歴 2016-03-11 更新 2014-07-25 gulp-bower-files がdeprecateされていた。代替は main-bower-files 2014-07-24 gulp-connect がdeprecateされた。代替は後継の gulp-webserver 2014-06-29 gulp-clean の箇所を修正（shinnn様にご指摘いただきました。感謝！m(_ _)m） 今は使わない方が良いプラグインリスト - gulpjs/plugins - github ↑要チェック。この記事には未反映 Webサーバー、ユーティリティ browser-sync Webサーバー/ライブリロード gulp-webserver Webサーバー/ライブリロード ※browser-syncに乗り換えた gulp-conn
Sassの@importでreset.cssやnormalize.cssを読み込む - Qiita
Sass の @import によるインライン展開は .css 拡張子に対応していないので、.css ファイルしか用意されてない HTML5-Reset や normalize.css、sanitize.css などはそのままではインポートできません。 ※.css ファイルを指定すると CSS の @import url(...) になってしまいます。 .scss バージョンを公開している人もいますができれば公式のものを使いたいし、自分でリネームしてリポジトリに置くというのも避けたいところです。 これらの条件をクリアするために、私は Bower でインストールしたあと gulp で .scss にリネームしていたのですが、node-sass-package-importer を使うとそんな手間もいらず簡単にインポートすることができたので紹介します。 インストール node-sass-pac
webpackやGulpを使う時に覚えて幸せになったnpmの便利な使い方 - Qiita
昨今のweb開発で必要なwebpackやGulpといった技術は、Node.jsのパッケージ管理ツール「npm」を通して使われます。npmの機能は豊富で、覚えておくと便利な使い方がいくつもあります。とくにオススメのものをピックアップしました。 npm initには-yをつけると質問が表示されない npmのモジュールを用いたプロジェクトを作成する際、最初に使用するコマンドはnpm initです。実行すると、プロジェクト名や著作権の設定の質問が表示され、必要な項目を入力したり、Yes([Enter]キー）を入力する必要があります。 とくに設定が不要な場合、-yオプションを指定することで、質問を表示することなく初期化できます。 次に示すのは、npm initとnpm init -y実行後のコマンドラインの差です。npm initはnameやversionといった設定を対話形式で尋ねられますが、np
赌博澳门网站大全,博彩澳门网站 在线,澳门娱乐在线341-【www.181866.com】
赌博澳门网站大全,主要经营棋牌茶艺简餐茶馆是爱茶者的乐园，也是人们休息、消遣和交际的场所。追其历史，十分悠久。中国的茶馆由来已久，据记载两晋时已有了茶馆。自古以来，品茗场所有多种称谓，茶馆的称呼多见于长江流域；两广多称为茶楼；京津多称为茶亭。此外，还有茶肆、茶坊、茶寮、
phiary
css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci
2016年、僕のおすすめgulpプラグイン | gulp | Horic Design
公開アップルップル社内勉強会 Vol.20 公開アップルップル社内勉強会 2016-01-18（月）19:30 - 21:00 社内の勉強会を一般の皆さんに公開しています。 毎月第3月曜日に開催して、今回で20回目になります。 発表は質疑応答を含め20-30分程度ですが、実際の発表... gulpはみなさんご存知ですよね？ファイルを圧縮したり結合したりするときに便利なやつです。今回は2016年にどんなプラグインを使っていこうか考え、整理してみました。 今回は、以下の４つの項目に分けて、自分のおすすめのプラグインを紹介します。 ユーティリティ CSS JavaScript HTML ユーティリティ browser-sync ファイル等の保存時に、ブラウザーをリロードする際に利用します。例えばCSSを変更した際にわざわざブラウザをリロードする手間を省きます 使用例）CSSファイルを保存した際に
CSS最適化から圧縮までできる「gulp-pleeease」 | ブログ - Blog | 佐藤純平 - Jumpei Sato
はじめに CSSのベンダープレフィックスの付与はいちいちやると面倒ですよね。必要ないのも書いてしまっていたり。。 今回はそんな問題を解決してくれる、「gulp-pleeease」の紹介です。 gulp-pleeeaseとは タスクランナーGulpのプラグインのひとつです。 Sassの使用から、CSSのベンダープレフィックスの付与、圧縮、メディアクエリを一つにまとめる等、使えるオプションが豊富なのが魅力です。 まずインストール 「Node.js」、「Sass」はインストール済みの想定で進めます。 ディレクトリで下記のコマンドを入力します。 なお、下記のコマンドはMac用です。 「package.json」の作成 npm init 「gulp」のインストール sudo npm install --save-dev gulp 「gulp-pleeease」のインストール sudo npm ins
古くなったgulpのdevDependenciesを一気に更新する方法
1年前に作ったgulpのタスクを久々に触ったら、package.jsonにあるdevDependenciesがかなり古くなっていました。そこで、これらを一気にアップデートする方法を探していたら、やっぱりありました。 npm-check-updates というツールが。 このツールを使うと、package.jsonにあるdevDependenciesのバージョンと最新のものを比較して見せてくれます。そして、コマンドを叩くだけで、古くなったすべてのdevDependenciesをアップデートしてくれます。 やり方は簡単で、まずはnpm-check-updatesをインストール： % npm install npm-check-updates -g npm-check-updatesを走らせる： % ncu すると以下のように古くなっているものを教えてくれます： % ncu gulp-newer
gulp-sass, gulp-plumberを使うときの注意 - Qiita
gulp, gulp-sassでSassのコンパイルをwatchしようとしたら、アレ？ってなったのでメモ。 .scssファイルでコンパイルエラーとなるような内容を書くと、watchのプロセス毎落ちてしまうので、gulp-plumberで防御しようとした。 .pipe(plumber()) の書き方だと一度エラーとなったあと、二度とコンパイルを行わないゾンビプロセスになってしまうという問題にぶち当たった。 以下のようにgulpfileを書いたところ解決。 'use strict'; var gulp = require('gulp'), sass = require('gulp-sass'), plumber = require('gulp-plumber') ; gulp.task('compile:sass', () => { return gulp.src('src/**/*.scss
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
gulpでsassをコンパイルするタスクを作る - yutaponのブログ
何番煎じかわからないけど、gulpを使ってみたら中々良かったのでまとめてみます。 gulp.jsとは gulp.js はフロントエンド用のタスクランナーってやつです。 同じタスクランナーの競合に Grunt がありますが、後発だけあってストリームを駆使して可読性の良い設定ファイルが書けます。 Gruntでできることは大体gulpでもできるので、どちらを使ったら良いかは好みの問題かも知れません。 この記事ではsassのコンパイルをするタスクと、関連してベンダープレフィックスを自動で付与するところまで紹介します。 gulpのインストール npmコマンドでサクッと入れます。 $ npm install -g gulp これでgulpコマンドが使えるようになりました。 gulpでsassのコンパイルをする gulpでsassをコンパイルするのに、こちらのプラグインを使います。 gulp-ruby-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
"filepath" does not exist in the hypothetical file system! · Issue #772 · rollup/rollup
