[フロントエンド] ES2015のimport/exportをブラウザで使うためのコンパイル（Babel × Browserify） - YoheiM .NET
こんにちは、フロントエンドのリハビリ中@yoheiMuneです。 今日はES2015（ES6）から言語レベルでサポートされたモジュール定義について、ブラウザで利用するための方法をブログに書きたいと思います。 目次 ES6のimport/exportはまだブラウザで使えない ES6から利用可能なimportとexportによるモジュール定義と利用ですが、残念ながらまだブラウザでは使うことができません。例えば以下のようなコードがあった場合に、 import React from "react" Chromeだと以下のようなエラーが発生します。 # Chrome v53の場合 Uncaught SyntaxError: Unexpected token import そして前回、「[フロントエンド] 次世代JavaScriptのコンパイラ、Babelに入門」でES6をES5にコンパイルする方法を
![[フロントエンド] ES2015のimport/exportをブラウザで使うためのコンパイル（Babel × Browserify） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/898f8fcd9a6b73b128ccbe4483be437cd0b5de56/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F450.jpg)
gulp-ruby-sassでfont-awesomeをコンパイルしたら文字化けした件 - Qiita
はじめに gulp-ruby-sassでfont-awesomeをコンパイルした時に、出力されるcssで文字化けするという現象に遭遇しました。現象とその対処法をまとめてみたので、何かの役に立てば幸いです。なお普通のsassでのコンパイルでも同様に再現しました。 対処法はスマートではない気もするので、もっとよい方法があればご教授ください！ 遭遇した環境は以下になります - windows7 - gulp-ruby-sass": "^2.0.5", - sass 3.4.4 なお既にissuesに上がっているようです https://github.com/sass/sass/issues/1395 何をしようとして、何が起こったのか font-awesomeを使ったmixin()を作成しようと以下のようなコードを書いていました @mixin bgFontAwesome($content) {
gulp：ビルド時にcharsetやファイルエンコードをShift_JISに変換する方法 - NxWorld
普段は基本的にファイルの文字コードはUTF-8を使用していますが、稀にShift_JISなど別の文字コードを使用する必要があります。 ただ、そういった場合でもgulpは使いたいってときに使える方法のひとつで、今回はUTF-8のファイルをビルド時にShift_JISに変換するというのを備忘録兼ねて紹介します。 プラグインのインストール 「gulp」は既にインストール済みという想定で、まずは下記をコマンドに入力して「gulp-replace」と「gulp-convert-encoding」という2つのプラグインをインストールします。 それぞれ用途としては「gulp-replace」は特定の文字列を置き換え、「gulp-convert-encoding」は別のエンコードに変換できるというものになり、この2つのプラグインを利用して実装していきます。 タスクの記述 ここではgulpfile.jsに記
gulp-sassのマイナーバージョンが上がったらsassファイルがコンパイルできなくなった
プロジェクトのメンバーから、gulpタスクで行なっているsassのコンパイルができなくなったとの相談を受けた。 起きていたエラーは以下。 SassのControl Directives（@if、@each、@for、@while）や他のmixinの中ではmixinが定義できない、ということらしい。プロジェクトのコード内で、@ifの中で@mixinの定義をしている部分でエラーになっていた。 調べたところ、package.jsonで指定しているgulp-sassのバージョンが3.1.0から3.2.1に上がっていた。 gulp-sassのバージョンを3.2.0にするとエラーが起きなくなるので、3.2.0から3.2.1の間に問題があるらしい。 gulp-sass@3.2.1の変更点を見ると、依存するnode-sassのバージョンが4.8.3に変更されている。（gulp-sass@3.2.0は4.8
Gulp(ガルプ)で爆速コーディング！複数の案件でGulpを使い回してみよう｜ネットのすき間でヤッテキュー！
フロントエンドエンジニアのマストツールGulp(ガルプ)。前記事ではGulpで使うべきミニマムに抑えたプラグインを紹介しました。 当然仕事をする上では複数の案件のファイルを触ると思います。ですがその度にGulpファイルとプラグインをインストールしていてはどんどん肥大化してしまい、PCのストレージを食ってしまいますよね。 Gulpファイルとプラグインを1度インストールし、それを案件毎に使いまわせるような配置と設定をし、Gulpをもっと効率的に使いこなすテクニックをご紹介します。 [2018/1/16 →gulpfile.jsの中身を更新しました] まずはGulpのキモ、gulpfile.jsを作成するgulpfile.jsをいかに上手に作るかがGulpのチカラを発揮させるキモになります。ここは個人のオリジナリティも出るところなので、コレが正解！というのもありませんので、皆さんの使いやすいよう
windows10でbrowser-syncのExternalアドレスに接続できないのはファイアウォール設定が原因
01. どういう風にダメなのか こうなります（LAN内のスマホからbrowser-sync起動PCの [IPアドレス]:3000 へアクセス） ちなみに、 browser-sync を起動してあげると 設定してるファイルにブラウザから localhost:3000 or [IPアドレス]:3000 でアクセスできるようになり 本来はこのような表示になります（browser-sync起動PCのブラウザ画面） 02. LAN上のスマホからアクセスできなかった時の実行環境 Windows10 Pro Node.js v8.4.0 browser-sync v2.18.13 調べてたら browser-sync の記事は2014～2015年頃が多かった。windows10のリリース日が 2015年7月9日 だからギリギリ今の自分と同じような状態の情報が見当たらないのも頷ける。だけど割と同じような現
Shift_JISなサイトをgulp, BrowserSyncで文字化けさせずに表示する - Qiita
なぜかいまだにShift_JISなサイトたくさんありますね。 見る分にはShift_JISでも問題ありませんが、運用にかかわってしまうとちょっと面倒なことになります。なぜか。 BrowsersyncだとShift_JISなサイトは文字化けするから。 そこでBrowsersyncでもshift-jisが文字化けしない方法を考えてみました。 ※検索するとShift_JISなhtmlをUTF-8に変換して書き出すと言うものは見つかりますが、そんな対応はしたくない、ということで以下になります。 Browsersyncのmiddlewareを使用して、Shift_JISなhtmlをUTF-8に変換してブラウザに表示させてしまいます。 "devDependencies": { "browser-sync": "^2.8.0", "gulp": "^3.9.0", "iconv-lite": "^0.4
browsersyncでShift-Jisのファイルを使用する - Qiita
browsersyncはShift-Jisファイルを読み込むと文字化けする 文字化けせずにbrowsersyncを使用するにはutf-8にエンコードすればいい。 ただ、ファイル自体をエンコードしてしまうのは嫌。。。。 そこで、ググったら以下の記事がヒット Shift_JISなサイトをgulp, BrowserSyncで文字化けさせずに表示する ありがたい。 が、自分の環境では少し修正しないと動かなかったので以下に記します。 まず、上の記事に従って必要なファイルを用意する。 package.jsonやgulpfile.jsですね。 因みに自分の使用した、browser-syncのバージョンは、2.12.12です。 そしたら、gulpfile.jsに以下のように書きます。 //サーバー起動 browserSync.init({ port: 3000,//無くてもいい server: { bas
必ず使うタスクランナーGulpとGruntの基本コード9選 - ICS MEDIA
みなさんはタスクランナーを使用していますか？ タスクランナーとは開発作業を自動化するためのツールで、2013年頃からWebのフロントエンド開発のトレンドとなっています。開発の現場では主にオープンソースのGulp（ガルプ）とGrunt（グラント）がよく使われています。 本記事ではGulpとGruntの両方の導入方法とウェブ制作でよく使用するプラグインの使い方を紹介します。GulpとGruntのいずれかはすでにインストールしているとして紹介します（記事末尾で付録としてインストール方法を解説しています）。 ※GruntとGulpの違いを知りたい方は記事「絶対つまずかないGulp入門」を参考ください。 この記事は2018年12月にリリースされたGulp 4に対応しています ファイルの複製 作業用のフォルダーからリリース用のフォルダーへファイルをコピーしたい時などに複製するタスクを登録しておくと便利
[フロントエンド] Gulpで文字列置換を行う - YoheiM .NET
こんにちは、@yoheiMuneです。 今日はライトなネタですが、Gulpで文字列置換を行う方法をブログに残したいと思います。 目次 Gulpとは Gulpとは、grunt.jsと同様にフロントエンドのビルドツールです。JavaScriptでタスクを定義することができ、JSの結合や圧縮、CSSのプリプロセッサ/ポストプロセッサの実行など様々なことを行うことができます。具体的には、[フロントエンド] nodeモジュール管理がフロントで使えるBrowserifyに入門に書きましたのでそちらもご覧いただけたら幸いです。 Gulpで文字列の置換を行う場合には、gulp-replaceモジュールを用いることで簡単に実現することができます。具体的には以下のように利用します。 まずはモジュールをインストールします。 $ npm install --save-dev gulp-replace 次に、gul
![[フロントエンド] Gulpで文字列置換を行う - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/ed2acbff7b5e83f67edb2cdd5cd0100dc79609a7/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F398.jpg)
テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 突然ですがみなさん、EJSってご存じですか？ EJSっていうのはですね、なんかもう、こう、すんごいツールでして！ とにかく、使うとコーディングがめっちゃ早くなるんですよ！！ 今回はそれを使って、爆速でコーディングするテクニックの入門編を紹介したいと思います。 EJSとは？ EJSはテンプレートエンジンと呼ばれるツールの1つで、JavaScriptのような書き方を取り入れつつHTMLが書けるという特徴を持っています。 ざっっっっくり言い表すと、SassとCSSの関係に近いです。 「EJSデータでより楽な書き方をして、HTMLに変換して出力する」ことができます。 これが使えるようになると、例えばheaderやfooterなどのパーツを分割して共通化させたり、JSのfor文のような命令がHTML上で使えます
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-ejs使用時に拡張子を変更してdestする方法 - NxWorld
EJSをgulpで使用してdestさせる際、単純に.pipe(ejs())だと拡張子が.ejsのままになってしまうのを任意の拡張子に変更してdestさせる方法です。 紹介する方法はgulpとgulp-ejsを使用して実装する方法になりますので、予めそれらが使用できる環境を用意してください。 まず、単純にgulp.src()で指定されたファイルをgulp.dest()に出力しその間でEJSの処理を行う場合は下記のようなタスクになると思います。 var gulp = require( 'gulp' ), ejs = require( 'gulp-ejs' ); gulp.task('ejs', function() { return gulp.src(paths.src) .pipe(ejs()) .pipe(gulp.dest(paths.dest)); }); この状態で$ gulp ej
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulpでブラウザのリロードを自動化してみた - Qiita
gulp：ブラウザのリロード自動化 - Web系開発メモ
イマドキのコーダー環境構築2016