gulpfile.jsをES6で書いてみよう - tacamy--blog
なぜgulpfile.jsをES6で書くの？ ES6にとりあえず触れて慣れてみたいという場合に、まずはgulpfile.jsで試してみるとよさそうという風潮があるみたい。理由はたぶん次のような感じかなと思ってる。 他への影響が少ない コードの分量が少ない 実装にあまり頭を使わないで書ける 環境によってはbabel等のトランスパイラをインストールせずにES6がそのまま使える 環境を準備する gulpfile.jsでES6を使えるようにするには、gulp側で対応するか、Node.js側で対応するかどちらかになります。 gulp側でES6に対応する gulpはv3.9.0からbabelを標準サポートするようになったので、babelを介してES6構文を利用できるようになりました。 ただし、ES6構文を使う場合は、ファイル名をgulpfile.babel.jsにする必要があります gulpのバージョ
最新版で学ぶwebpack 4入門 - BabelでES2017環境の構築(React, Three.js, jQueryのサンプル付き) - ICS MEDIA
最新版で学ぶwebpack 5入門 Babel 7でES2023環境の構築 (React, Vue, Three.js, jQueryのサンプル付き) ECMAScript 2015(略：ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ES2015〜ES2023の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します。 トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules（impo
Babel と watchify で ES2016 のビルド環境を作る ｜ Tips Note by TAM
JavaScript の新仕様である、ECMAScript 2016 (以下ES2016) がリリースされました。 ES2015 はもう普通にバリバリ使ってるよという方も多いと思いますが、まだ手を出していない、って人も結構いらっしゃるかと思います。ES2015 などを使ってコードを書きはじめるにあたり、まずはビルド環境を用意するのが最初のハードルかなと思いますので、今回は Babel と browserify, watchify などを使ったビルド方法を紹介します。 ※ なお、今回のサンプルコードは GitHub のこちらにも置いています https://github.com/tam-matsuo/gulp-watchify-es2016 ES2015, ES2016 とは ES2015 は名前のとおり 2015年6月に公開された、JavaScript の言語仕様です。ES5 の次バージョ
Gulpの環境でPHPを使う
Gulpとbrowser-syncを使ってHTMLのコーディングを行っている際に、一部PHPファイルを使いたいという状況があったので、その時に設定した方法をメモしておきます。 設定方法 browser-syncとgulp-connect-phpを使用するので、それぞれをインストールします。 npm install browser-sync --save-dev npm install gulp-connect-php --save-dev gulpfile.jsに処理を記述します。 gulpfile.js var gulp = require('gulp'), browserSync = require('browser-sync'), connect = require('gulp-connect-php'); gulp.task('server', function() { conne
Gulp.js+EJS+JSONを使った複数ページの生成方法 - aircolor memolog
人気のタスクランナーツール「Gulp.js」とテンプレートエンジン「EJS」を下地に、 JSONデータから複数ページを生成できる仕組みを備忘録を兼ねて紹介します。 きっかけ 現在進めている案件で、HTMLを静的かつそこそこ大量に作る事案が発生。 しかし1ページづつ作成・修正するのはとにかくめんどくさいと思われたので、JSONで情報を一括で編集でき、生成も簡単に出来るやり方を確立したかった。 前提・やりたいこと サーバはありものを使用。権限的な問題で新たにパッケージのインストールすることは不可。 PHPが使えないサーバだったため、複製は静的HTMLで行う必要がある。 似たページを1つづつ作成、後で修正をするのはとにかくめんどくさいので、機械的に行いたい。 ページ複製用データは全てJSONファイルにまとめたい。 仕様 書き出しツールとしてGulp.jsを使用。 テンプレートエンジンはEJS。採
EJSとCSVを使って効率の良い量産をしよう | Coding Methodology | CFニュース | CODING FACTORY - コーディング専門サービス
中規模以上のサイト制作では、ページごとにレイアウトが異なるものだけでなく、ある程度レイアウトが決まったテンプレートページを量産していくケースが多くなってきます。制作に携わる人数を増やして手作業で1ページずつ制作していく方法もありますが、今回はテンプレートエンジンのEJSとCSVファイルを用いてページを一括でHTML書き出しをする方法をご紹介します。 EJSgulpJSON 手法の概要・手順 今回は、コーディングに関する様々な作業を自動化してくれるタスクランナーのGulpをベースにするので、gulpfile.jsが実行できる環境を用意します。ディレクトリ構成は図１のようにします。/_frontend/ディレクトリがEJSなどの処理を行う実行環境で、/public/が書き出されるHTMLを格納する場所です。 ①CSVファイルの用意 表形式で記述ができ、スプレッドシートやExcelでの管理がしや
gulp.js を今一度キチンと！gulp.js 導入基礎
フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。 そんなときに活用できるのが、今回使い方を紹介する gulp です。 gulp.js このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。 gulp とは？ gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には
Pugとgulp-dataを使ってmetaの内容をjsonで管理する
gulp-dataを使って、Pugで使うmetaの内容をjsonで管理するようにしてみます。 サンプルコード gulp-pugとgulp-dataをインストールします。 npm install gulp-pug --save-dev npm install gulp-data --save-dev gulpfile.jsに以下のように記述します。 var gulp = require('gulp'), pug = require('gulp-pug'), data = require('gulp-data'); gulp.task('pug', function() { gulp.src( ['./_pug/**/*.pug', '!./_pug/**/_*.pug'] ) .pipe(data(function(file) { // metaのjsonファイルを取得 var metaDa
テンプレートエンジン「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上で使えます
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
gulp-nunjucks-render
gulp-twig
gulp-print
実践編 – EJSでサイト制作効率化 - to-R Media