gulp-webpackで複数のファイルをコンパイルするときに注意する点のメモ - Qiita
問題 gulp-webpackでは、webpackを内部で呼び出している。 その際、copyせずにentryやoutputにデータを入れてstream対応している。 公式ドキュメントのようにwebpack(require("webpack.config"))するとrequireのキャッシュにより、同じオブジェクトが参照される。 結果ファイル名が同一になり、保存のタイミング次第でA用の結果がBに出力されることがある。 対策 webpack.configのオブジェクトを毎回違うものにする。 var config = module.exports = function() { // 毎回別のもにして、生成する return { externals: { "jquery": "jQuery" }, resolve: { root: "./js" }, extensions: ['', '.js']
帰ってきたGulp 4 - Qiita
2014年あたりから、v4が出なくてやきもきしていましたが、待つこと3年(4年?)、2018年のはじめにv4.0.0がリリースされました。2018年現在の視点で、v4をチェックしてみたいと思います。 タスクは関数に 以下、GitHubにある例からの抜粋です。(多少変形しています) import {src, dest} from 'gulp' import less from 'gulp-less' import rename from 'gulp-rename' import cleanCSS from 'gulp-clean-css' export default () => src('src/style.css') .pipe(less()) .pipe(cleanCSS()) .pipe(rename({basename: 'main', suffix: '.min'})) .pip
gulpでjsのconsoleを消したり圧縮したりする - unsweets.log
引き続きgulpです。プラグインを使ってデバッグに使うconsoleを消したり圧縮したりします。 インストール consoleを消すプラグインはgulp-strip-debugです。 $ npm install --save-dev gulp-strip-debug 圧縮はお馴染みのuglify。いくつか同じようなプラグインがあるのですが今回はgulp-uglifyを使用しました。 $ npm install --save-dev gulp-uglify 2つインストールしたら準備は完了です。 タスクを記述する gulpfile.jsに以下を記述。 gulp.task('compress', function() { return gulp.src('./js/*.js') .pipe(stripDebug()) .pipe(uglify()) .pipe(gulp.dest('./bui
Browsersync の起動を早くする - Qiita
BrowserSync の起動が遅くてイライラが半端無かったので、debug ログを表示してみたところ下記の3箇所で詰まっていました。 [BS] [debug] -> Starting Step: Finding an empty port [BS] [debug] Found a free port: 3000 [BS] [debug] Setting Option: port - 3000 [BS] [debug] + Step Complete: Finding an empty port [BS] [debug] -> Starting Step: Checking online status [BS] [debug] Resolved www.google.com, setting online: true [BS] [debug] Setting Option: online
gulp.watch()でpugのコンパイルをしない方法 | 丸ノ内テックブログ
フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A
各項目を選択・入力するだけでgulpで使用するソースを出力してくれるジェネレータ「gulp generator」 - NxWorld
「gulp generator」はgulpで使用するgulpfile.jsとpackage.jsonに記述するソースを出力してくれるジェネレータで、用意されている各項目を選択したりファイルの読み込み・出力箇所を入力していくだけで簡単に必要なソースを出力してくれます。 サイトにアクセスすると上のイメージのような見栄えになっており、ページ左側で実行したいタスクを選択したりファイルの読み込み・出力箇所を入力して、その結果としてページ右側にgulpfile.jsとpackage.jsonに記述するためのソースが出力されるようになっています。 タスクの選択部分は大きく分けて「css」「js」「html」「その他」の4つに分類されており、上のイメージ（イメージは「css」を選択時）のようにそれぞれファイルのパス指定をする部分と各タスクを選択する項目が用意されています。 よく利用されると思うようなものは
GulpでCSSやJavaScriptをHTMLにインライン挿入 | q-Az
Gulp を使って CSS や JavaScript を直接 HTML に入れ込む方法です。 いろいろな方法がありますが、単純に「css ファイルや js ファイルをテキストとして html（php）ファイルに挿入する」という方法で実現します。 gulp-file-includegulp-file-include という npm パッケージを使います。 gulp-file-include | npm 上記のリンクを見てもらえばだいたいわかると思います。今回は基本的な機能のみ使用。 インストールnpm install --save-dev gulp-file-includegulpfile.jsvar gulp = require('gulp'); var fileInclude = require('gulp-file-include'); gulp.task('include', fun
gulpでWebFont作成を自動化 | Web雑記帳
gulp-iconfontでweb-font作成を自動化 前の記事（WebFont作成をGrunt.jsで自動化）でGruntによるweb-font自動化をやったのですが、今日マークアップ勉強会がベースキャンプ名古屋で開催されていなたのでgulpでもやってみました。 参考 以下２つを参考に動かしてみました。[Tsutomu Kawamura]さんのコードを少しいじって動かした感じです。 https://www.npmjs.org/package/gulp-iconfont https://github.com/cognitom/symbols-for-sketch インストール 以下が今回インストールしたパッケージになります。 gulp gulp-consolidate テンプレートエンジンで使用 gulp-iconfont シンボルフォント作成の本体 gulp-rename gulp-w
gulpfileをCoffeeScript等で書く方法
Task Runnerツールのgulpで、 タスクの設定は gulpfile.js という設定スクリプトを作って書くことになっています。 (任意のファイルを指定する場合は、コマンドライン引数の --gulpfile オプションで指定します) gulp/docs/getting-started.md at master · gulpjs/gulp Task Runnerツールとして有名なGruntでは、設定ファイルをjs以外にCoffeeScriptをデフォルトでサポートしているため、 オブジェクトの入れ子がたくさんできる gruntfile をCoffeeScriptで書くという人も多いと思います。 gulpでは、デフォルトでは js ですが、 --require オプションを使うことで任意のaltJSを使って、 gulpfile を書くことが出来るようになっています。 (この場合のデフォ
How to set up Gulp for Compass compilation and minification, JavaScript minification, livereloading, and use with ExpressionEngine.
1) readme.md How to set up Gulp with an ExpressionEngine project I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc). Install Node.js If Node is not yet installed on the machine, it will need
wordpressのtheme開発を自動化するgulpの設定 | がぶっとひとかみ
Written by maneater_rhythm posted on 7月 27, 2014 in プログラミング wordpressのテーマを作成する際、sassのプリコンパイルやブラウザのリロードをgulpでやると便利なので備忘録として設定を残しておく。 gulpとは様々なタスクを自動化するビルドシステムである。 ここで紹介するgulpのビルドレシピは次のことを自動で行う。 sassやJavascriptの変更を検知し、自動的にコンパイル・minifyを行う css, js, phpファイルの変更を検知し、ブラウザを更新する browser-syncを利用することで、ページ遷移、スクロール、フォームへの入力をブラウザ間で同期する gulpのインストール方法はここでは説明しない。ググってくれ。 gulpの設定はこんなん。 // Load plugins var gulp = requ
Bowerとgulp-bowerでフロントエンド向けライブラリを管理する
プログラミング (iOS, JavaScript, Jenkins, Sikuli) とMacやiPhoneなどの話題が中心のブログ Bowerとgulpを組み合わせて使うことでフロントエンド向けライブラリを管理できるようにしてみる、ということで、Bowerの簡単な使いかたとgulpでの利用方法について簡単に説明します。 なお、gulp自体の利用方法については、以前の記事「ビルドシステムgulpをCoffeeScriptで使ってみる」を参照ください。 Bowerの導入とパッケージインストール Bowerはnpmでインストールします。 npm install -g bower コマンドbowerの基本的な使いかたは、npmと同じです。まず、bower initで初期化しておきます。 > bower init [?] name: sample [?] version: 0.0.0 [?] de
npm + gulp + bower でビルド自動化 - GeekFactory
(追記) この記事は公開から時間が経っており、内容が古くなっています。2016年時点ではWebpackが圧倒的におすすめです。 JavaScriptやCSSのビルドを自動化することで、手作業による無駄な時間やミスを削減できます。また、誰でもビルドできるようになるため、リリースのボトルネックを解消できます。 改善したいこと JavaScriptフレームワークやCSSフレームワークの依存関係を自動的に管理したい。ダウンロードして配置を手作業でやりたくない。 CoffeeScriptやLESSのコンパイルを自動的に実行したい。手順書を見ながらコマンドを叩くとかやりたくない。 ダウンロードしたライブラリをリポジトリに入れたくない。 出荷対象のリソースを明確にしたい。ゴミファイルをリリースしたくない。 どうやって実現する？ bowerでライブラリの依存関係を管理する。 gulpでビルドを自動化する。
gulp-pleeease を試してみた | BUN:Log
Twitter のタイムラインで見かけたこの記事 gulp-autoprefixerよりもいい感じ。gulp-pleeeaseを使ってcssを処理しよう | isee ウェブに関するブログ： http://isee-web.net/?p=593 ちょっと気になったので、実際に試してみました。 やったことBundler 経由でインストールした Sass と gulp-sass を既に利用していたため、プラグインのみをインストール。 $ npm install --save-dev gulp-pleeeasegulpfile.js は以下のように調整。 .scss から生成された CSS ファイルに適用したかったので、run-sequence でタスクの実行順を指定しています。 // task.sass gulp.task('sass', function(){ return gulp.src
» GulpでSassのコンパイルとlivereloadをやってみる | isee ウェブに関するブログ
Gruntと同じくタスクランナーのGulp。Gruntよりもビルドファイルが読みやすく、スピードも軽快な気がします。GulpとGrunt Gruntに関しては前回の記事で(タスクランナーGrunt導入メモ)導入方法と簡単な使い方を紹介しましたが、今回はGruntと同じタスクランナーのGulpでSassのコンパイルとブラウザを自動で更新するlivereloadを使ってみたいと思います。 Gulpのいいところ Gruntと大きく違う部分は以下になります。 ・Gruntよりもビルドファイルの可読性が良く、短いコードで済む ・なるべくタスクを並列で実行しようとするので、スピードが早い Gruntもとても優秀ですが、GulpはGruntの良い部分を引き継ぎ、短所を改善したツールだそうです。そのためビルドファイルの書き方や導入方法はGruntと似ているので、Gruntを使ったことのある人は、使いや
a-blog cms Ver. 2.1 のomakeを使って個人ブログを作り直してます ノート dotgraphy
先週、6月23日にa-blog cms Ver. 2.1がリリースされ、お値打ちなセールも行っています。そんな中、セール期間の7月7日まで、制作スタッフがブログでリレーをするということで順番がまわってきました。 僕は、普段の業務ではデザイン作業を中心に行っており、実装はほとんどやらないのですが、この機会に最近のトレンドも押さえておこうとブログテーマをなかば強引に作ってみました。 （※ナビゲーションがもう1つ :-< ） テーマを作るのに、主に以下の内容を行いました。 ローカルにa-blog cmsをインストール blog2014をベースに作りはじめる gulpの設定してみる LessとかLivereloadとか使ってみたい acms.cssのグリッドをつかってユニットをレイアウト ローカルにa-blog cmsをインストール テーマを作る際に、やっぱりローカルにa-blog cmsをインス
打倒Grunt！Node.js用の新たなビルドシステムgulpことはじめ | OpenWeb
メリークリスマス！ このブログは、HTML5 Advent Calendar 2013の12/25用です。 とはいえ、HTML5カンファレンスとかあったせいで、最近あまり技術的なトピックを追っておらず・・・ ここは、つい最近目にした gulp というプロダクトを触ってみたレポートでもしようかと思います。 Node.js製なので、実はHTML5ともあんまり関係ない。すいませんすいません gulpは、自身のことを「ストリーミング・ビルド・システム」と称しています。つまり、Gruntなどと同カテゴリの「ビルド用ツール」です。 Gruntは、JSON形式で宣言的にタスクのパラメータを記述していく形式です。慣れればスッキリしていて見やすいし、設定を変更するのも容易なのですが、細かくタスクの動作を制御する必要が生じた時に「何をどうすれば求める結果が得られるのか？」がわかりにくいという欠点があります。あ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp-inject