Gulpを使って特定のファイル内に書かれている文字列を「正規表現を使って置換（削除）」する方法｜今村だけがよくわかるブログ
Gulpを使って「特定のファイル内に書かれている文字列を置換（削除）」する機会がありました。 具体的にどういう時に使ったのかというと・・・AMP（Accelerated Mobile Pages Project）対応のページをオリジナルデザインにする際にインラインでCSSを適用することがあるのですが、文字エンコーディングの指定（「@charset “UTF-8”;」など）の記述があると以下のようなエラーが出ます。 CSS syntax error in tag 'style amp-custom' - saw invalid at rule '@charset'.Sassを使ってCSSをコンパイルすると、この文字エンコーディングの指定が自動で書かれてしまいます。(書かれない方法もあるかもしれないけど、調べましたがいいやり方が見つけられませんでした;;) というわけで、毎度コンパイルするたび
Gulpを使って特定のファイルが変更されたら自動的にタスクを実行する方法｜今村だけがよくわかるブログ
Web制作の効率化に役立つGulpを使って、CSSファイルの容量を軽量化する方法を以下のページに書きました。 ところで、軽量化する元となるファイルを変更するたびにタスクを毎度実行するのは手間がかかりますね。そこで、特定のファイルが変更されたら自動的にタスクを実行するように監視する「gulp-watch」を使ってもっと効率化させます。 以下にその流れを書きましたので、興味がありましたらご参考ください。 gulp-watchのインストールコマンドプロンプト（またはターミナル）を起動して、gulpがインストールされている作業フォルダ（今回はデスクトップ上のhtdocsフォルダとします）内で以下のコマンドを実行します。 npm install --save-dev gulp-watchgulp-watchを読み込むインストールが完了したら、作業フォルダ内にある「gulpfile.js」ファイルをテ
gulp：ディレクトリ・ファイル構成を維持してdestする - NxWorld
gulpで何かしらのタスクを実行後などにgulp.dest()する際、ディレクトリ・ファイル構成をそのまま維持して出力させる指定方法の備忘録です。 サンプルのディレクトリ・ファイル構成と実装したい動きについて ここで紹介しているものは下記のようなファイル構成のものを使用していると想定します。 また、動きとしてはgulp.dest()使用時にこの構成のまま/distに出力する（/srcが/distになる感じ）というものになります。 └─ /src ├─ index.html ├─ /css │ └─ style.css ├─ /js │ └─ script.js └─ /images ├─ img_01.jpg ├─ img_02.jpg └─ img_03.jpg /**/*で指定 手っ取り早くディレクトリ・ファイル構成を維持しつつすべてをgulp.dest()したいときは、下記のようにg
gulp-webserver - Qiita
var gulp = require('gulp'); var webserver = require('gulp-webserver'); gulp.task('webserver', function() { gulp.src('dist') //任意のフォルダー htdocsとか .pipe(webserver({ host: 'localhost', port: 9001, //任意のport番号 livereload: true, //ライブリロード directoryListing: false //directory表示 open: true })); }); var gulp = require('gulp'); var webserver = require('gulp-webserver'); gulp.task('webserver', function() { gu
browser-syncでSSIを使う
Gulp + browser-sync の環境でSSIを使う機会があったので、設定方法をメモしておきます。 設定方法 Gulpの環境を用意して、browser-syncとconnect-ssiをインストールします。 npm install browser-sync --save-dev npm install connect-ssi --save-dev gulpfile.jsファイルに処理を追記します。 gulpfile.js var gulp = require('gulp'), browserSync = require('browser-sync'), connectSSI = require('connect-ssi'); /* ================================================== Browser-sync ============
gulpで編集中のscssファイルをwatchしてCSScombした話 - marc tech
こんにちは！フロントエンドエンジニアのセイです！ ネタな記事が増えていたので堅実な記事を書きたいと思い、開発環境を整備した際に書いたコードを紹介します。 目的：watchタスクで監視しているSCSSをCSScombで成形したい。 当初、上記の目的に沿ったコードをWEB上で検索したのですが、gulp で SCSS をコンパイルした CSS に CSScomb をかけるものがほとんどでした。また編集している SCSS 自体を CSScomb にかける記事もあったのですが、別途ディレクトリを用意して解決していたので、別の方法があるのではないかと考え作成しました。 今回の開発環境は以下のようになっております。 最低限のタスクのみ書いているので実際に案件で使用する際は追記して使用してください。 version "gulp": "3.9.1" "gulp-csscomb": "3.0.8" "gulp
gulpで自分が編集しているscssをcssCombしたい - Qiita
cssCombは便利だ。 でもgulpでの導入方法を調べてみると、プロパティの並び順を整えてコンパイルする方法しか見つからなかった。 個人的にはコンパイル後の綺麗さはどうでもよくて、編集するファイルこそ綺麗にしたい。 やりたいこと scssを保存するたびに下記を実行したい そのscssをcssCombで整える cssにコンパイル 結論 これで実現できる { "devDependencies": { "gulp": "^3.9.1", "gulp-changed-in-place": "^2.0.3", "gulp-compass": "^2.1.0", "gulp-csscomb": "^3.0.8", "gulp-watch": "^4.3.5" } } var changedInPlace = require('gulp-changed-in-place'); var compass
gulp でディレクトリ構造を維持したコピー - アカベコマイリ
失敗談 & そこから得られた知見の記録。いままで gulp で複数ディレクトリの構造を維持してコピーするとき以下のようにしていた。 var gulp = require( 'gulp' ); gulp.task( 'copy', function() { gulp.src( 'src/*.html' ).pipe( gulp.dest( 'dest' ) ); gulp.src( 'src/css/**' ).pipe( gulp.dest( 'dest/css' ) ); gulp.src( 'src/js/*.js' ).pipe( gulp.dest( 'dest/js' ) ); } ); この処理だと gulp.dest が冗長なうえ同期実行のためにコールバック関数を呼び出す場合も個別に end/error イベントをハンドリングする必要があり面倒だ。それにもかかわらずこうしてい
gulp と browserify と vinyl の話 - <body>
browserify の API が変わったので、この記事のコードのままでは動きません！ gulp で browserify しようとしたんだけど、 色々ハマったので、 ひとまずまとめておきたい。 登場人物 gulp ちゃん フロントエンドのビルドエンジン。 grunt を馬鹿にしてる。 browserify ちゃん CommonJS スタイルの require をフロントエンドでも使えるようにする npm モジュール。 調子に乗ってるけど webpack がきになる。 vinyl ちゃん npm 全般で使うオブジェクトの名前。モナドを感じる。 俺がさっき知った。 gulp の仕組み そもそも gulp って、確かに grunt より短く書けるけど、 具体的になにしてるのかよくわかんねーよ！ って思ったので、 まず、この短いコードから考えていきたい。 var gulp = require(
ejsでHTMLを量産したときのおさらい - もっく日記
レイアウトが同じで「タイトル」と「メイン画像」が違うHTMLを量産するために使いました。 あまり理解できてないので、理解を深めるためにまとめようと思います。 ながれ ページ生成用JSONファイル（pages.json）をつくる テンプレート用EJSファイル（template.ejs）をつくる EJSの設定をgulpfile.jsに追記する gulpタスクを起動 構想 フォルダ構成 ↓こんなかんじで作ろうと思います。 src ├── __gulpfile.js__ │ ├── json │ └── __pages.json__ └── ejs └── __template.ejs__ dist └── __ejs生成HTML出力先__ JSONデータ 下記３つのデータJSONで管理しようと思います。 出力ファイル名(page) タイトル(title) 画像ファイル名(imageSrc)
Gulp.js+EJS+JSONを使った複数ページの生成方法 - aircolor memolog
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
Gulp + EJS + JSONを使用してhtmlファイルを量産する方法 | ブログ | Glatch（グラッチ） - 夫婦で活動するフリーランスWeb制作ユニット
似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {
gulpで複数のスプライト画像やWebフォントを管理する - Qiita
gulpでスプライト画像や Webフォントを生成する 今や CSSスプライト画像や Webフォントを、手動で作成・更新する機会は少なくなりました。タスクランナーがファイルの生成から CSS定義まで自動でやってくれます。 自分は CSSスプライトには gulp.spritesmith、Webフォントには gulp-iconfont を愛用しています。 どちらも以下のように指定のディレクトリに格納されている複数の PNGファイル、SVGファイルを結合して 1つのスプライト画像やWebフォントを生成する仕様になっています。 # スプライト画像元データ ./develop/sprite/heart.png ./develop/sprite/diamond.png ./develop/sprite/spade.png ./develop/sprite/clover.png # スプライト画像生成デー
phiary
css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci
gulp.jsで便利なタスクを作ってみよう【エラーと通知編】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、店長です。 前回のデバッグ編は「デバッグ」をテーマに、HTMLの記法チェックとブラウザ間同期をする方法についてご紹介しました。 今回のテーマは、「エラーと通知」です。gulpタスクでエラーを受け取った際に、効率的に動かす方法と、そのエラーをデスクトップへ通知する方法をご紹介します。 前回までのファイルと、今回のファイルはこちらにあります。 Im0-3/gulp-tutorial – Github 4-1が前回の内容、4-2、4-3が今回作る内容になっています。ファイルをダウンロードしたら、ターミナルでprojectフォルダに移動して $ npm install を実行しましょう。そうすると、制作に必要なライブラリをダウンロードできます。 前回までのファイルの内容は下記のとおりです。 ディレクトリ構成 project |--app | |--product | | |--inde
Gulp.js入門 - コーディングを10倍速くする環境を作る方法まとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
普通に使う分には全く困らないほどの数のプラグインがGulpにはあります。 Githubでのstar数からも明らかなように、GoogleのWenStarterKitでもGulpが採用されるなど、注目度はますます高くなっています。 Gruntとの比較 Gruntと比較してのメリット・デメリットは以下のようになります。 メリット Gruntより設定ファイルが記述しやすい StreamAPIを利用することでファイルを毎回書き出すGruntより高速でエコ デメリット 記述がよりNodeに近くなるため、複雑なことは敷居がやや高め プラグイン開発のためのドキュメントが少ない 今日のゴール Gulp.jsを使ってコーディング作業を10倍速くする！ そんな環境を作りたいと思います。 1. Node.jsをインストール まずはNode.jsをインストールしましょう。 Node.js http://nodejs
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
EJS+gulpで静的サイトのHTML生成 - Qiita