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を作成します
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
## 作業フォルダ作成 mkdir gulp-test ## 移動 cd gulp-test ## package.jsonを作成 npm init <出力結果> 全てENTERキー押下で作成 This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. See `npm help json` for definitive documentation on these fields and exactly what they do. Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (gulp-test) version: (1.0.0) description: entry point: (index.js) test command: git repository: keywords: author: license: (ISC) About to write to /home/testuser/gulp-test/package.json: { "name": "gulp-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes) |
プロジェクトの設定情報などが書かれた package.json が生成されます
Gulpのインストール
Gulpをローカルインストールします
1 2 |
## 今回利用するプラグインgulp-sassもインストール npm i -D gulp gulp-sass |
ローカルインストールとグローバルインストールについてはこちら
gulpfile.jsの作成
gulpを利用するためのgulpfile.jsを作成する。 package.jsonと同じ階層に作成して下さい
1 2 |
## 作成 touch gulpfile.js |
SassをGulpでコンパイル してみる
scss/test.scss をコンパイルして、test.css を トップディレクトリー に生成する
まずは、scssディレクトリを作成する
1 |
mkdir scss |
test.scssをviで作成して、編集する
1 2 |
## 編集 vi scss/test.scss |
test.scssを下記の内容で作成する
1 2 3 4 5 6 7 8 9 10 |
#main{ background-color:#000; .content{ background-color:#aaa; color:#000; .sidebar{ padding:10px; } } } |
参考 ディレクトリ構成
topディレクトリ

scssディレクトリ

gulpfile.jsの編集
gulpfile.jsを下記の内容で編集し、タスクを実行する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
// gulpプラグイン読み込み const gulp = require("gulp"); // gulp-sassプラグイン読み込み const sass = require("gulp-sass"); // タスクを作成する gulp.task("default", function() { return ( gulp // test.scss取得 .src("scss/test.scss") // Sassのコンパイル実行 .pipe( sass({ // 後述 outputStyle: "expanded" }) ) // topディレクトリー に生成 .pipe(gulp.dest("./")) ); }); |
outputStyle:各スタイルについて
下記のscssがコンパイルされた場合の各スタイル
1 2 3 4 5 6 |
body { color: #fff; h1 { color: #000; } } |
nested
1 2 3 4 |
body { color: #fff; } body h1 { color: #000; } |
expanded
1 2 3 4 5 6 7 |
body { color: #fff; } body h1 { color: #000; } |
compact
1 2 3 |
body { color: #fff; } body h1 { color: #000; } |
compressed
1 |
body{color:#fff}body h1{color:#000} |
タスクの実行
下記のコマンドでタスクの実行が可能
1 |
sudo npx gulp |
top ディレクトリにtest.cssが下記の内容で生成される
1 2 3 4 5 6 7 8 9 10 11 12 |
#main { background-color: #000; } #main .content { background-color: #aaa; color: #000; } #main .content .sidebar { padding: 10px; } |
ファイル変更時に自動でタスクを実行させる
test.scssが編集されると、自動的にtest.cssが生成され、圧縮された.min.cssが生成されるように gulpfile.jsを編集する
プラグイン追加
CSSの圧縮とリネームを行うプラグインを追加する
1 |
npm i -D gulp-rename gulp-clean-css |
gulpfile.jsを編集する
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
// gulpプラグイン読み込み const gulp = require("gulp"); // gulp-sassプラグイン読み込み const sass = require("gulp-sass"); // gulp-renameプラグイン読み込み var rename = require('gulp-rename'); // gulp-clean-cssプラグイン読み込み var cleanCSS = require('gulp-clean-css'); // Sassをコンパイルするタスクの設定 gulp.task("css", function () { // scssディレクトリ内全てのファイル return gulp.src('scss/*.scss') //コンパイル実行 .pipe(sass()) .pipe(sass({outputStyle: "expanded"})) // topディレクトリー に生成 .pipe(gulp.dest('./')); }); // .min.cssを生成するタスクの設定 gulp.task("mincss", function () { //cssタスクで生成したcssファイル return gulp.src('./*.css') // 圧縮 .pipe(cleanCSS()) // リネームする .pipe(rename({extname:'.min.css'})) // topディレクトリー に生成 .pipe(gulp.dest('./')); }); gulp.task("default", function () { // scssフォルダの全てのscssが変更されるとコンパイルが実行される gulp.watch('scss/*.scss',gulp.series('css', 'mincss')); }); |
監視開始
1 2 3 4 5 6 |
## 実行 sudo npx gulp <出力結果> [13:08:11] Using gulpfile /home/testuser/gulp-test/gulpfile.js [13:08:11] Starting 'default'... |
scss/test.scssを編集してみる。カラーを全てfffに変更
1 2 3 4 5 6 7 8 9 10 |
#main{ background-color:#fff; .content{ background-color:#fff; color:#fff; .sidebar{ padding:10px; } } } |
test.cssも全て#fffに変更されて、圧縮されたtest.min.cssが生成される
1 2 3 4 5 6 7 8 9 10 11 12 |
#main { background-color: #fff; } #main .content { background-color: #fff; color: #fff; } #main .content .sidebar { padding: 10px; } |
test.min.css も圧縮されている
1 |
#main{background-color:#fff}#main .content{background-color:#fff;color:#fff}#main .content .sidebar{padding:10px} |
gulp プラグインは、検索すればたくさんでてきますので、活用してみて下さい
-
前の記事
CentOs7 lsofコマンドを利用できるようにする 2019.10.29
-
次の記事
CentOs8にEslintの導入手順 2019.10.29
コメントを書く