gulpをES2015で実装するzukucode主にWEB関連の情報を技術メモとして発信しています。gulpgulpをES2015で実装するgulpをES2015(ES6)で実装するための手順です。gulpのインストールgulpがインストールされていない場合はインストールします。(nodejsは導入済みとします。)グローバルとローカルの両方にインストールします。(ES6)などで書かれたソースコードを一般的なブラウザがサポートしているECMAScript5の形式に変換できます。以下の4つのパッケージをインストールします。babel-preset-stage-0設定ファイルの作成.babelrcという名前のファイルをプロジェクトのルートフォルダに作成します。このファイルを作成しておけば、babelを実行する時に自動でこの設定ファイルを読み込みます。"stage-0"]}設定内容は必要に応じて書き換えてください。gulpfileの作成gulpのタスクを実装するファイルを作成します。babelを使わない場合はgulpfile.jsというファイル名ですが、今回はbabelを使用するため、gulpfile.babel.jsというファイル名になります。することにより、gulpが自動的にbabelを読み込むようになります。これでgulpをES2015で実装する環境が整いました。動作確認gulpfile.babel.jsを以下のように実装します。console.log('gulpをES2015で実装する');});そして、以下のコマンドを実行すると「gulpをES2015で実装する」と出力されればOKです。front-matterの内容をdataとして使用する関連記事Vue.jsを学習する上で知っておきたいES2015の文法Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。objectの中...静的サイトジェネレーターを自作してブログ作成システムを作成JekyllやHugoなど、魅力的なものはあったのですが、この際勉強を兼ねて静的サイトジェネレーターを自作してみようと思いました。以下、gulpで静的サイトジェネレーターを自作したときの作業メモです。includeで絶対パスを指定するnunjucksの便利な機能の1つにincludeがあります。ファイルパスはデフォルトでは相対パスで設定されます。メインとなるnjkファイルのパスによって以下のようになってしまいます。nunjucksをコンパイルしてhtmlに変換するnunjucksで記載されたテンプレートエンジンをhtmlに変換します。今回はnunjucksのコンパイルにgulp-nunjucks-renderを使用します。markdownの内容をhtmlに変換するgulpでmarkdownの形式で記載したデータをhtmlに変換します。markdownを変換してnunjucksで扱う実際に公開するhtmlファイルの中身はmarkdownから変換したhtmlの内容だけではなく、titleやdescriptionなどのmetaタグやヘッダ、フッタなどの情報が必要です。lessをcssにコンパイルするlessファイルをgulpを使ってcssにコンパイルします。gulp-lessとgulp-autoprefixerをインストールします。front-matterの内容をdataとして使用するブログの記事を作成するにあたって、titleやdescriptionのメタ情報やカテゴリー、タグなど、ファイルごとに管理する情報はfront-matterの形式で管理すると便利です。引数を受け取って開発時とリリース時で処理を分岐するコマンドラインでタスクを実行する際に、以下のようにパラメータを指定して、タスク処理では指定されたパラメータを受け取って処理を分岐するようにします。10で範囲を指定して画面のスクリーンショットを撮る方法を紹介します。画面全体の指定した部分のみを切り取ってクリップボードに保存します。システム日付をYYYYMMDD形式などの文字列型に変換する当ホームページに記載されている会社名・製品名・システム名などは、各社の登録商標、もしくは商標です。