MENU

clear
Zihuatanejo to me

ブログカテゴリー

最新の記事

メニュー

SNS

Gulp導入

目次

    gulpの導入手順

    こんにちは!フロントエンドエンジニアのキヨシ太夫です!

    最近LPの制作案件がありまして、普段rails,coffee script,slim,sassで開発している身からするとそのままのhtmlもcssもjavascriptもコーディングがストレスだとwww

    で、今回は完全に個人完結する案件だったのでそういった案件が今後も来ると信じてLPコーディング用のリポジトリを作りました。

    static-page-template

    今回はその備忘録として。

    gulp導入を検討している方の参考になれば!

    gulp導入

    gulpとは

    公式サイト

    https://gulpjs.com/

    タスクランナーとは

    タスクランナーとは、そのままなんですが、タスクを処理してくれるやつですwww

    要は予め決められたタスク(処理)を実行してくれるものです。

    例えば、cssのベンダープレフィックスを自動で付けてくれるとか。

    便利ですよね?

    できること

    もちろん色々あるので、ここでは触り程度に。

    • cssベンダープレフィックス自動付与
    • sassをcssにコンパイル
    • slimをhtmlにコンパイル
    • coffeeをjavascriptにコンパイル
    • 各ファイルをミニファイしてくれる
    • etc

    まあ他にも色々ありますが、今回はフロントエンド系の基本的なやつを上げました。

    今回の要件

    要件

    要件と言っても上記の機能を付けるくらいですねwww

    今回の要件としては、制作案件の効率が目的なので、なるべく汎用的なものにしたなと。

    なので、ファイル納品でその後の運用は先方任せというケースも考慮するとミニファイなどはないほうがベターなので本記事での要件は以下とします。

    • cssベンダープレフィックス自動付与
    • sassをcssにコンパイル
    • slimをhtmlにコンパイル
    • coffeeをjavascriptにコンパイル
    • 上記をファイルの変更を検知して自動実行する

    こんなもんですかね。

    Github

    static-page-template

    導入手順

    手順

    前提

    今回は導入からタスクの実装までやりたいので細かくはやりません。

    なので前提としてnode.jsとnpmが入っている前提で進めます!

    node.jsのインストールの参考は以下で!

    Node.jsのインストール

    概要

    • 一応前提条件の確認
    • package.jsonの作成
    • gulpインストール
    • gulp.jsの編集

    手順としてはこんなもんでしょうか。

    詳細

    一応前提条件の確認

    Node.jsの確認

    $node -v
    

    npmの確認

    $npm -v
    

    package.jsonの作成

    Gulpを適用するディレクトリにて以下コマンド。

    $npm init -y
    

    gulpインストール

    同ディレクトリにて。

    導入マシン上の全てでgulpを適用させる方法もあるようですが、考慮しなければいけない要件が増えるため今回は該当ディレクトリで適用されるGulpタスクを作ります。

    $npm install gulp -D
    

    gulp.jsの編集

    実際のgulpタスクの実行はjsファイルで設定します。

    だので該当ディレクトリ直下にgulpfile.jsというファイルを作ります。

    さらに必要なタスクモジュールをインストールします。

    モジュールのインストールのコマンドは以下。

    $npm install -D gulp hogehoge
    

    hogehogeの部分に必要なタスクモジュールを書きます。

    例えば、

    $npm install -D gulp gulp-sass
    

    などです。

    モジュールのインストールが完了したら、gulpfile.jsファイルでモジュールの呼び出し設定を行います。

    以下は参考までに。

    const sass = require('gulp-sass');
    // sass -> css
    gulp.task('build-css', function(){
      return gulp.src('dev/sass/*.sass')
        //cssをsassへ変換
        .pipe(sass({
          outputStyle: 'expanded'
        })).on('error',sass.logError)
        .pipe(gulp.dest('production/css/'));
    });
    

    簡単に説明すると、

    dev/sassディレクトリのsassファイルをcssファイルに変換して、production/cssディレクトリに保存すると。

    そんな感じです。

    最終的なgulp実行コマンド

    実行コマンド

    slim→html

    $npx gulp build-html
    

    sass→css

    $npx gulp build-css
    

    coffee script→javascript

    $npx gulp build-js
    

    ファイル変更の監視

    $npx gulp watch
    

    最後に

    基本的には、コーディング作業前に、ファイル変更の監視のタスクを走らせてからコーディングすれば問題ないかと。

    これがあるだけで開発のスピードは格段に上がるはず。。。

    本日はここまで!

    ありがとうございました!

    コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    arrow_upward

    Top