CentOs8へgulp.js導入手順

CentOs8へgulp.js導入手順

作業を自動化してくれるタスクランナー 「gulp.js(ガルプ)」の導入手順です

環境

  • OS  CentOS Linux release 8.0.1905 (Core)
  • node V10.16.3
  • npm 6.9.0
  • gulp 4.0.2
  • gulp-sass 4.0.2

※centos8にnodeのインストール手順はこちら

gulp.jsとは

タスクランナー 「gulp.js(ガルプ)」 はファイルの保存時などに、圧縮やSassへのコンパイル等を自動で行ってくれるツールです

package.jsonの作成

下記の手順でpackage.jsonを作成します

プロジェクトの設定情報などが書かれた package.json が生成されます

Gulpのインストール

Gulpをローカルインストールします

ローカルインストールとグローバルインストールについてはこちら

gulpfile.jsの作成

gulpを利用するためのgulpfile.jsを作成する。 package.jsonと同じ階層に作成して下さい

SassをGulpでコンパイル してみる

scss/test.scss をコンパイルして、test.css を トップディレクトリー に生成する

まずは、scssディレクトリを作成する

test.scssをviで作成して、編集する

test.scssを下記の内容で作成する

参考 ディレクトリ構成

topディレクトリ

scssディレクトリ

gulpfile.jsの編集

gulpfile.jsを下記の内容で編集し、タスクを実行する

outputStyle:各スタイルについて

下記のscssがコンパイルされた場合の各スタイル

nested
expanded
compact
compressed

タスクの実行

下記のコマンドでタスクの実行が可能

top ディレクトリにtest.cssが下記の内容で生成される

ファイル変更時に自動でタスクを実行させる

test.scssが編集されると、自動的にtest.cssが生成され、圧縮された.min.cssが生成されるように gulpfile.jsを編集する

プラグイン追加

CSSの圧縮とリネームを行うプラグインを追加する

gulpfile.jsを編集する

監視開始

scss/test.scssを編集してみる。カラーを全てfffに変更

test.cssも全て#fffに変更されて、圧縮されたtest.min.cssが生成される

test.min.css も圧縮されている

gulp プラグインは、検索すればたくさんでてきますので、活用してみて下さい