copy_people copy_things copy_matter copy_heart copy_txt ttl_topics ico_blank ico_facebook ico_twitter ico_hatebu ico_index

2017/10/24

gulpインストール

INDEX

    社内の案件でgulpを使うことが増えたので、都度都度ネットで調べた記事を元にインストールをしていたのですが、自分の状況によってすること・しなくていいことがあるようです。それがわからず、毎回????となっていたのでまとめました。

    「gulpインストール」といっても状況によって行うことが違います。だいたいは、下記に分かれると思います。

    • このパソコンでgulpを使うのは初めて
    • 過去に別の案件でgulpを使った
    • わからない

    では、条件別に確認方法やインストール手順を説明します。

    1. わからない の場合

    まずグローバルにgulpがインストールされているか確認します。

    確認方法

    • ターミナルを起動
    • $ which gulp
    • インストール済みの場合、そのディレクトリが表示される
    インストール済みなら、このようになる

    ※バージョン管理をnodebrewでやってるので、node brewのディレクトリ内にnodeがある

    2. このパソコンでgulpを使うのは初めて
    or わからないの方法を試したらなかった

    • あるパソコンでgulpを使いたいとき、前提としてNode.jsがインストールされている必要がある
    • ターミナルで$ which nodeを入力して確認する
    Node.jsがある場合

    ここではnode brew、Node.jsがインストール済みの前提で話を進めます。

    gulp-cliをグローバルにインストールする

    プロジェクトでgulpを使いたい場合、まずグローバルにgulp-cliをインストールする必要があります。
    $ npm i gulp-cli -gこれで実行されます。

    ※gulp-cli…ターミナルでgulpコマンドを使えるようにするもの

    これでグローバルにgulp-cliがある状態になりました。

    3. 過去に別の案件でgulpを使った

    グローバルにgulp-cliがインストールされている状態で、今から始める案件にgulpを使いたい場合。

    この場合、クローンする場合(すでに他の誰かがgulp環境を設定している場合)と、自分で新規に環境構築する場合で、なにをするか分かれます。

    クローンする場合(すでに他の誰かがgulp環境を設定している場合)

    • ターミナル起動
    • $ cd [ディレクトリパス]で移動
    • $ npm iを実行すれば、package.jsonを参照してインストールをしてくれます

    自分で新規に環境構築する場合

    • ターミナル起動
    • $ npm -vでnpmのバージョン確認
    • $ sudo npm install -g npmでnpmのバージョンを最新にする
    • $ cd [ディレクトリパス]で移動
    • $ npm initでpackage.json作成。enterですすんでいくとできる
    • $ npm i gulp-Dでgulpインストール。-Dはpackage.jsonのdevDependencisにgulpいれたよって記録するオプション(-D--save-devのショートカット)

    $ npm i ○○ -D$ npm i ○○ —save-devとなります。

    npm installについて詳しくはこちら

    その他

    • $ touch gulpfile.js→ gulpfile.js 作成
    • $ gulp --help→gulpのヘルプを表示

    ※package.jsonとは

    ルートディレクトリに用意する用意するファイルで、gulpで使うパッケージの管理につかいます。
    例)
    package.json

    {
      "name": "html",
      "version": "1.0.0",
      "description": "",
      "main": "gulpfile.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "gulp-autoprefixer": "^3.1.1",
        "gulp-concat": "^2.6.1",
        "gulp-csscomb": "^3.0.8",
        "gulp-plumber": "^1.1.0",
        "gulp-rename": "^1.2.2",
        "gulp-sass": "^3.1.0",
        "gulp-sourcemaps": "^2.6.0",
        "gulp-uglify": "^2.1.2"
      }
    }
    

    参考サイト

    試す。

    実際にpackage.jsonをつくるところから試してみようと思います。

    testディレクトリにgulpをインストールします。まず、

    1.ターミナル起動
    2.$ npm -vでnpmのバージョン確認
    3.$ sudo npm i -g npmでnpmのバージョンを最新にする

    次に、

    4.$ cd [ディレクトリパス]で移動

    5.$ npm initでpackage.json作成。enterですすんでいく

    こちらを実行するといろいろ聞かれます。package.jsonに何を書くか、ということなのですが後からでも編集できるのでひとまずEnterで進みます。
    すると、testディレクトリ直下にpackage.jsonが作成されています。

    package.jsonの内容は下記になります。

    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC"
    }
    

    6.$ npm i —Dでプロジェクトにgulpインストール
    package.jsonにgulpのバージョンが追加、testディレクトリ直下にnode_modulesディレクトリが作成されました。

    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "gulp": "^3.9.1" … gulpのバージョン
      }
    }
    

    $ touch gulpfile.jsをするとtestディレクトリ直下にgulpfile.jsが作成されます。(中身は空です。)
    $ touchはgulpに関係はなく、ターミナルのコマンドで、ファイルを新規作成するものです。
    gulpfile.jsの中身は自分で書く必要があります。

    今回は、

    • sassのコンパイル
    • gulp-postcssのautoprefixerでベンダープレフィックスを自動でつける
    • gulpでエラーがでたときに止まらないようにする

    この3つを行うために必要なgulpfile.jsを書きたいと思います。

    test配下に以下のようにhtdocs、srcというフォルダを作成し、/src/scss/配下に作成したsassファイルを、/htdocs/css/配下にcssファイルとしてコンパイルできるようにgulpfile.jsを作成します。

    var gulp = require("gulp");
    var sass = require("gulp-sass");
    var postcss = require("gulp-postcss");
    var plumber = require("gulp-plumber");
    
    
    gulp.task("sass",function(){
        gulp.src("src/scss/**/*.scss")
        .pipe(plumber())
        .pipe(sass())
        .pipe(postcss([
            require('autoprefixer')({browsers: ['last 4 versions','not IE < 9','not Android < 4.4']})//「ブラウザ4バージョン前まで、IE9以下は除外、Android4.4以下は除外」という意味
        ]))
        .pipe(gulp.dest("htdocs/css"))
    });
    
    gulp.task("default", function() {
        gulp.watch("src/**/*scss",["sass"]);
    });
    
    • var gulp = require("gulp");…gulpを呼び出している。他も同様
    • gulp-postcss…autoprefixerを使ってベンダープレフィックスを自動でつける
    • gulp-plumber…エラーがでたときにsassを止めないようにする

    gulpfile.jsはできたのですが、これだけではうごきません。各々をインストールする必要がありますので、プロジェクトのディレクトリにいる状態で

    $ npm i gulp-sass -D
    $ npm i gulp-postcss -D
    $ npm i autoprefixer -D
    $ npm i gulp-plumber -D

    を実行します。

    {
      "name": "test",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "autoprefixer": "^7.1.6",
        "gulp": "^3.9.1",
        "gulp-plumber": "^1.1.0",
        "gulp-postcss": "^7.0.0",
        "gulp-sass": "^3.1.0"
      }
    }
    

    package.jsonにインストールしたものが追記されます。
    あとは$ gulpと実行すればOKです。

    では、/src/scss/style.scssを

    div{
      display: flex;
      p{
        font-size: 16px;
      }
    }
    

    として保存します。すると/htdocs/css/に

    div {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
      div p {
        font-size: 16px; }
    

    style.cssが出力されました。
    ベンダープレフィックスが自動でついていることが確認できました。
    他にもgulp-postcssでは、autoprefixer以外の機能もあります。
    gulp-sassではcssの出力時の整形も指定できます。

    autoprefixerでは、browswerl.istでベンダープレフィクスの対応範囲を設定できます。

    対象とするブラウザなどについてはこちらの記事 で。

    導入の段階で少し面倒かも…というのはありますが、なれてくるととても便利です。是非、試していただければと思います。

    CONTACT

    お仕事のご相談や、弊社についてのご質問や
    ご要望など、お気軽にお問い合わせください。

    View