gulp v4.0.0がプレリリース！ 移行方法と変更点まとめ 2018年1月8日 ※この記事は2018年1月8日に公開しましたが、2020年9月14日に内容をメンテナンスしています。 gulp 2018年1月1日に、gulp v4.0.0がプレリリースされました。この記事では、gulp v4への移行方法と、主な変更点をいくつか紹介します。 gulp v4への移行方法 まず、gulp v3からv4への移行方法について説明します。 gulpのグローバルインストール グローバルインストールされているgulp v3を削除して、gulp v4をグローバルインストールします。 $ npm rm -g gulp $ npm install -g gulp-cli 参照：Quick Start | gulp.js gulpのローカルインストール ローカルインストールされているgulp v3を削除して、g

Help us understand the problem. What are the problem?

最近、Gulpが4.xにバージョンアップしましたね。そのタイミングで開発環境でもGulpをアップデートしてエラーに困っている声を聞いたりします。 僕自身もGulpを使っている環境で4.xにアップデートして、それまで使っていたライブラリからエラーが出て四苦八苦しました。その時、ふと思ったんです。「Gulpに依存してるなー」と。そして、「だったらnpm-scriptの方がいいかも」と思い、npm-scriptで開発環境を作る流れを書いてみようと思います。 タスクの流れ Sassの処理 node-sassでコンパイルプリフィックス付与と圧縮処理ディレクトリを削除して新しくディレクトリを作るSassの処理をまとめて一連のタスクを流して処理 JavaScriptの処理 バンドルする圧縮する一連のタスクを流して処理 画像の処理画像圧縮の処理画像圧縮の一連の流れのタスクを作るファイルを監視するブラウザシ

nodenv という Node.js のバージョンマネージャを使う。 Node.js のバージョンマネージャとしては creationix/nvm やら hokaccha/nodebrew などがある。どれも使いやすいので好みで選んで問題ないが、 nodenv は ruby のバージョンマネージャである rbenv/rbenv のクローンであり同じコマンド設計なので、 rbenv や pyenv や plenv に慣れている・合わせたい人にオススメである。 nodenv をインストールする nodenv をホームディレクトリの .nodenv にクローンする。

起きた問題 MacBook ProのメンテナンスのついでにNode.jsのバージョンアップを行ったところ、旧環境で実行できていたgulpが下記のようにクラッシュして正常に動作しなくなってしまいました。 gulp[28017]: ../src/node_contextify.cc:631:static void node::contextify::ContextifyScript::New(const FunctionCallbackInfo<v8::Value> &): Assertion `args[1]->IsString()' failed. 1: node::Abort() [/Users/yokokoujiyoshihito/.nodebrew/current/bin/node] 2: node::InternalCallbackScope::~InternalCallbackS

gulpを実行したらnode-sassでエラー 原因は、node.jsのバージョンが変わってしまったことにあるようです。 今後も起こりそうでしたので備忘録として記載しておきます。 エラー文は下記のような内容。 [17:19:50] 'sass' errored after 407 ms [17:19:50] Error: The `libsass` binding was not found in /Users/hogehoge/node_modules/gulp-sass/node_modules/node-sass/vendor/darwin-x64-46/binding.node This usually happens because your node version has changed. Run `npm rebuild node-sass` to build the bi

nodeのバージョン管理 バージョン管理したいしたいと思いながらも、 いままでパッケージのnode.jsだったので管理なんて全くできてなかった。 今回少し余裕ができたので、 nodebrewを入れて、nodeのバージョン管理することに。 ただアップデートするとgulpうごかなくなるので 次回の対応のためにやったことをメモ。 参考にさせていただいたのはこちらの記事。 （ありがとうございますありがとうございます） http://tipsbear.com/homebrew-nodebrew-nodejs/ パッケージでいれてたnode.jsを削除して、 nodebrewいれてnodeを最新版に更新した。すると… gulp動かない 一通り作業が終わってgulp立ち上げたら、 gulp動かなくなってた！ エラーはこれ。

タイトルの通り。 npm install --save なり --save-dev なりして package.json に書き込まれたパッケージのバージョン、どうやって定期的にアップデートしていけばいいかわからなかったので。 新しいバージョンがリリースされているかどうかの確認と、実際にどのように新しいバージョンにアップデートすればいいのか調べてみた。 今回サンプルに使う package.json package.json の例として、以前、React のチュートリアルをやったときのリポジトリを使う。 { "name": "react-es6-tutorial", "version": "1.0.0", "description": "React Tutorial written in ES6", "main": "index.js", "scripts": { "test": "echo

css の vendor prefix ですが, 今までは gulp-autoprefixer で自動付与してました. ただまぁ, CSS って後方互換対応や minify といった他にもやることがありまして... その辺一括でやってくれるのないかなぁと探してたところ pleeease とかいうとても便利な module があったので紹介します. pleeease とは？ pleeease とは, CSS を簡単に最適化できる Node.js アプリケーションです. pleeease を使うことで過去のブラウザもサポートしつつ, クリーンな CSS を作ることができます. やってくれること一覧 CSS の事前処理 ベンダープレフィックスの付与( Autoprefixer ) rem をピクセルに変換した値も指定. rem をサポートしていないブラウザでも安心♪ IE8 のための opaci

koltatt.net 2024 著作権. 不許複製 プライバシーポリシー

最近「寺子屋」と称して個人レッスンというか、数名規模の私塾みたいなことをやっているこもりです。こんにちは。 寺子屋については年が明けてからあらためてお知らせするとして、寺子屋の参加者の皆さんの間などでよく「Gitは使ってるんだけど、アップロード先がFTPしかだめで…。どうにかなりませんかね？」みたいな質問を受けることがあります。もったいないですね。手元は効率化できてるのに、最後の最後がそれじゃ。 アップロード先がFTP（とかSFTP）しか使えない場合は、「dploy.io」とか「Deploy」みたいにGitHubとかBitBucket、自分のリモートのリポジトリからデプロイだけやってくれるサービスを使ったり、むしろその辺も一緒くたになった「Beanstalk」みたいなのを使うと簡単なのですが、いかんせんそれなりにお金はかかります（その辺の話はここに書いてます）。 dploy.io – Co

人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採

最近gruntよりgulpの方が熱い！という噂を聴いてバリバリgrunt派だったのですがチャレンジしてみました。 インストールとかは同じnode関連なのでnpm使えば簡単にできるので、この辺りgruntと大差なく導入できるなぁ〜って印象でした。 gruntで言うところのwatchがgulp自体に含まれてるっぽいので、gruntより最初の段階でnpm install する量は少なくて済みますね。ﾊﾗｼｮｰ!! インストール関係はこちらを参考にしました。 liginc.co.jp いつもやっている、javascriptの結合とmin化をするタスクを書いてみました。 プロジェクトのpackage.jsonを作る。 node.jsが必要なので、インストールされてない場合は下記リンクなどを参考にインストールしておいてください。 Macにnvm + Node.jsをインストールする - Qiita プ

2016 - 02 - 01 静的サイトジェネレーターを比較してgulp-ejsに辿り着いた Web開発 gulp スポンサード リンク 静的サイトジェネレーター（スタティックサイトジェネレーター）をいくつか比較し、実際に使ってみて、最終的に gulp-ejs に辿り着きました。 まず、gulp-ejsに辿り着くまでの話を少しだけ。 その後、gulp-ejsの導入方法を書いていきます。 gulp-ejsに辿り着くまで 最初はsmarty 元々は動的サイトを構築するために、 smarty を利用していました。 データベースとの通信や、テンプレートエンジンとしての機能、強力なキャッシュ機能など、使いやすい部分も多かったです。 しかし、データベースとの通信が不要で簡単なサイトを作るようなケースの場合、メリットよりもデメリット（導入やメンテナンスに掛かる手間）の方が大きくなったので、簡単に使える静

似たようなhtmlを複数ページ制作するような案件があると思いますが、地道に複製して制作するのは非効率で管理も面倒でミスもしやすいです。 そこで今回はGulpとEJSというテンプレートエンジンを使用してJSONファイルに設定した値を読み込み、複数のhtmlファイルを量産する方法を備忘録を兼ねてご紹介します。 今回使用するもの 今回はGulpを使用してEJSを動かします。Gulpの導入方法などは検索するとたくさん記事が出てきますので、そちらをご確認下さい。 テンプレートエンジンであるEJSと、生成したファイルごとに名前を付与するリネーム用のプラグインを導入します。 gulp-ejs gulp-rename pages.json template.ejs gulp.js 各ファイルの設定 pages.json ユニークな値を格納するJSONファイルは下記の通りです。 { "pages": [ {

PHPが使えない環境で役立つテンプレートエンジン 筆者が関わっている案件ではほぼPHPが使えるのですが、時々PHPが使えない案件があります。そんな時に共通部分、特に <head>〜</head> を外部ファイルにしたい時に役立ちました。 まだ使って一週間も経っていませんが、気付いた点をまとめてみました。誤っている点などありましたらご指摘お願いいたします。 環境 ここではGulpを使う環境で紹介していきます。 フォルダ構成はこのようになっています。 / ← ここにコンパイルしたものを出力 + .src/ + node_modules/ + ejs/ + vars/ ← 定数など | + _const.ejs + module/ ← 使い回しするパーツ | + _social.ejs + common/ ← ヘッダやフッタ共通パーツ | + _header.ejs + content_A/ ←

似たようなファイルをたくさん作る機会があったんだけど、面倒だし後から更新するのも大変。 そこで、GulpとEJSを使って、JSONファイルの設定を読み込んで、その設定の分だけHTMLファイルを生成する方法はないかと探してみたところ、やっぱりありました。 aircolor.hatenablog.com ただ個人的に、いっぱいタスク作るのってどうなんだろう...と思ったので、1個のタスクにまとめてみることに。 用意するもの gulpは入れてある前提。インストールは割愛。 fs gulp-ejs gulp-rename 下記は新しく作ります。 pages.json（各ページの設定用ファイル） template.ejs（テンプレートEJSファイル） 各ファイルの設定 pages.json それぞれのページの設定を記述。 { "pages": [ { "id": "page1", "title":

静的なHTMLをそこそこ制作する案件があったので EJSを試しに使ってみました。 複数ページの情報をJSONで管理し、 テンプレートエンジン“EJS”でHTMLを書き出してみます。 こちらのページを参考にさせていただきました。 Gulp＋EJS＋JSONからHTMLファイルを生成する ▼環境

Web制作の効率化に役立つGulpを使って、CSSファイルの容量を軽量化する方法を以下のページに書きました。 ところで、軽量化する元となるファイルを変更するたびにタスクを毎度実行するのは手間がかかりますね。そこで、特定のファイルが変更されたら自動的にタスクを実行するように監視する「gulp-watch」を使ってもっと効率化させます。 以下にその流れを書きましたので、興味がありましたらご参考ください。 gulp-watchのインストールコマンドプロンプト（またはターミナル）を起動して、gulpがインストールされている作業フォルダ（今回はデスクトップ上のhtdocsフォルダとします）内で以下のコマンドを実行します。 npm install --save-dev gulp-watchgulp-watchを読み込むインストールが完了したら、作業フォルダ内にある「gulpfile.js」ファイルをテ

何人かでコーディングの作業をする際にGulp.jsを使用したのですが、他の人の設定したpackage.jsonを使う方法がよく分からずに色々と調べたりしたので、今後のためにやり方をメモ。 Node.jsやGulp.jsは既にインストールしている状態です。 npm installの実行 コマンド プロンプト起動後、ディレクトリの移動。 cd 作業ディレクトリ この後でLocalにGulp.jsをインストールしたり、package.jsonで設定しているプラグインを個別にインストールしていかないといけないと思っていたのですが、コマンド プロンプトで npm install と入力することで、package.jsonで設定している必要なプラグインをまとめてインストールできるようです。 【参考サイト】 gulpとかnpmのこととか by A Memorandum