gulpでscssコンパイル自動化【FuelPHP】

2020年10月2日
2020年10月18日
プログラミング
css, FuelPHP, gulp

プログラミング

Pocket

1 目的
2 環境

目的

開発環境(MAMP)、FuelPHPでタスクランナーgulpを使って、scssのコンパイルを自動化する方法を解説

環境

macOS

MAMP v5.7

php v7.4.2

FuelPHP v1.8.2

npm v6.14.5

gulp v4.0.2

※MAMPはインストール済みとして進めます

まだの方はこちらの記事を参照してインストールしてみてください

また復習用にgithubにコードを載せています

https://github.com/takehiro-1029/fuelphp_gulp

1.FuelPHPインストール

MAMPのhtdocs配下にFuelPHPのプロジェクトを作成します。


$ curl https://get.fuelphp.com/oil | sh  //FuelPHPクイックインストール

$ oil create fuelphp_test                //プロジェクト作成

http://localhost/fuelphp_test/public/

上記urlでFuelPHPの画面が表示されればインストール完了です

2.FuelPHP編集

簡単に編集して準備していきます

controllerとviewを作成

まずcontrollerとviewを作成します

コマンドでtemplate.php、action.php、posts.phpが作成できます

公式ドキュメント


$ php oil g controller posts action

Creating view: /Applications/MAMP/htdocs/fuelphp_test/fuel/app/views/template.php
Creating view: /Applications/MAMP/htdocs/fuelphp_test/fuel/app/views/posts/action.php
Creating controller: /Applications/MAMP/htdocs/fuelphp_test/fuel/app/classes/controller/posts.php

ここでaction.php内を全て削除して以下に書き換えましょう


<div class="test1">Action1</div>

<div class="test2">Action2</div>

<div class="test3">Action3</div>

<div class="test4">Action4</div>

<div class="test5">Action5</div>

<div class="test6">Action6</div>

<div class="test7">Action7</div>

routes.phpを編集して画面表示できるようにします

routes.phpを編集

/fuel/app/config配下にあるroutes.phpを編集します


・・・

'_root_' => 'welcome/index',

'test' => 'posts/action',　　　　//追加

・・・

追加したら

http://localhost/fuelphp_test/public/posts/action

で画面が表示されるか確認してみてください

この画面が表示されればOKです

3.scssファイルの作成、編集

scssファイルの作成

先に監視対象のscssファイルを作成しておきます

今回は/public/assets配下に作成していきます


$ mkdir scss

$ cd scss 

$ mkdir app 

$ touch style.scss

$ cd app

$ touch _test1.scss

$ touch _test2.scss

作成完了したら下記の構成になります

scssファイルの編集

作成したファイルを編集していきます


@import "./app/**";

※改行しないとgulp実行時にエラーが出るので気をつけてください


$num: 3;

@for $i from 1 through $num {
    .test#{$i} {
        font-size: 10 * $i + px;
　　} 
}


$num: 7;

@for $i from 4 through $num {
    .test#{$i} {
        font-size: 20 * $i + px;
    }
}

文字の大きさを変えるコードを書いておきます

4.package.json を作成、編集

package.json を作成

gulpを使うためにnpm initでpackage.json を作成します

いろいろ聞かれますが、すベてenterで大丈夫です

※npmコマンドを使用するためにはNode.jsのインストールが必要です

Node.jsインストール参考


$ npm init

fuelphp_test配下にpackage.jsonが作成されます

package.json を編集

次に必要なパッケージをインストールしていきます

今回は下記のパッケージを使用します

"browser-sync"

"gulp"

"gulp-autoprefixer"

"gulp-notify"

"gulp-plumber"

"gulp-sass"

"gulp-sass-glob"

"gulp-sourcemaps"

下のコマンドをコピーして実行してください


$ npm install -D gulp browser-sync gulp-autoprefixer gulp-notify gulp-plumber  gulp-sass gulp-sass-glob gulp-sourcemaps

インストールが完了するとpackage.jsonのdevDependencies内に追記され、fuelphp_test配下にnode_moduleディレクトリが作成されます


{
  "name": "fuelphp_test",
  "version": "1.0.0",
  "description": "* Version: 1.8.2 * [Website](https://fuelphp.com/) * [Release Documentation](https://fuelphp.com/docs) * [Release API browser](https://fuelphp.com/api) * [Development branch Documentation](https://fuelphp.com/dev-docs) * [Development branch API browser](https://fuelphp.com/dev-api) * [Support Forum](https://forums.fuelphp.com) for comments, discussion and community support",
  "main": "index.js",
  "directories": {
    "doc": "docs"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0",
    "gulp-sourcemaps": "^2.6.5"
  }
}

5.gulpfile.jsを作成

下記コマンドでgulpfile.jsを作成します

※ここにgulpを実行するためのコードを書いていきます


$ touch gulpfile.js

下記のように編集します


const gulp = require('gulp');
const browserSync = require('browser-sync');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const sassGlob = require('gulp-sass-glob');

gulp.task('browser-sync', function(done) {
  browserSync.init({
      proxy:"localhost/fuelphp_test/public/posts/action"
  })
  done();
});

gulp.task('bs-reload', function (done) {
  browserSync.reload();
  done();
});

gulp.task('sass', function(done) {
  // style.scssファイルを取得
    gulp.src("public/assets/scss/style.scss")
        // sourcemapを有効にする
        .pipe(sourcemaps.init())
        // Sassの@importにおけるglobを有効にする
        .pipe(sassGlob())
        // Sassのコンパイルを実行
        .pipe(sass({outputStyle: "expanded"}))
        // ベンダープレフィックスの設定を追加
        .pipe(autoprefixer(['last 3 versions', 'ie >= 8', 'Android >= 4', 'iOS >= 8']))
        .pipe(sourcemaps.write())
        // 作成したcssを以下に保存
        .pipe(gulp.dest("public/assets/css/dist"));
        done();
});

// Gulpを使ったファイルの監視
gulp.task('default', gulp.series('sass','bs-reload','browser-sync', function(done){
  gulp.watch("./public/assets/scss/app/*.scss", gulp.task('sass'));
  gulp.watch("./public/assets/css/dist/*.css", gulp.task('bs-reload'));
  done();
}));

6.gulp実行

コンソール画面でgulpを使っていきましょう

gulp browser-sync


$ gulp browser-sync

[18:41:34] Using gulpfile /Applications/MAMP/htdocs/fuelphp_test/gulpfile.js
[18:41:34] Starting 'browser-sync'...
[18:41:34] Finished 'browser-sync' after 16 ms
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 -------------------------------------------------------------------------
       Local: http://localhost:3000/fuelphp_test/public/posts/action
    External: http://192.168.100.105:3000/fuelphp_test/public/posts/action
 -------------------------------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------------------------------------------

ローカルサーバーを立ち上げてブラウザで表示してくれます

gulp bs-reload


$ gulp bs-reload

[18:47:27] Using gulpfile /Applications/MAMP/htdocs/fuelphp_test/gulpfile.js
[18:47:27] Starting 'bs-reload'...
[18:47:27] Finished 'bs-reload' after 1.23 ms

監視中に自動でブラウザをリロードするために使用します

gulp sass


$ gulp sass

[18:29:42] Using gulpfile /Applications/MAMP/htdocs/fuelphp_test/gulpfile.js
[18:29:42] Starting 'sass'...
[18:29:42] Finished 'sass' after 7.73 ms

scssファイルをコンパイルしてpublic/assets/css/dist配下にstyle.cssを作成してくれます


.test1 {
  font-size: 10px;
}

.test2 {
  font-size: 20px;
}

.test3 {
  font-size: 30px;
}

.test4 {
  font-size: 80px;
}

.test5 {
  font-size: 100px;
}

.test6 {
  font-size: 120px;
}

.test7 {
  font-size: 140px;
}

/*# sourceMappingURL=data:application...

最後に/fuel/app/views/template.phpを編集して、cssファイルを読み込むようにします


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><?php echo $title; ?></title>
    <?php echo Asset::css('bootstrap.css'); ?>
    <?php echo Asset::css('dist/style.css'); ?>　　　//追加
    <style>
        body { margin: 40px; }
    </style>
</head>
・・・

コンソールでgulpコマンドを入力するとブラウザが立ち上がります


$ gulp

[19:45:45] Using gulpfile /Applications/MAMP/htdocs/fuelphp_test/gulpfile.js
[19:45:45] Starting 'default'...
[19:45:45] Starting 'sass'...
[19:45:45] Finished 'sass' after 6.69 ms
[19:45:45] Starting 'bs-reload'...
[19:45:45] Finished 'bs-reload' after 838 μs
[19:45:45] Starting 'browser-sync'...
[19:45:45] Finished 'browser-sync' after 14 ms
[19:45:45] Starting '<anonymous>'...
[19:45:45] Finished '<anonymous>' after 9.43 ms
[19:45:45] Finished 'default' after 33 ms
[Browsersync] Proxying: http://localhost
[Browsersync] Access URLs:
 -------------------------------------------------------------------------
       Local: http://localhost:3000/fuelphp_test/public/posts/action
    External: http://192.168.100.105:3000/fuelphp_test/public/posts/action
 -------------------------------------------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 -------------------------------------------------------------------------
[19:45:46] Starting 'bs-reload'...
[19:45:46] Finished 'bs-reload' after 1.93 ms
[Browsersync] Reloading Browsers...

scssのfont-sizeを変更し、自動でブラウザがリロードされ変更が反映できたら完成です


$num: 3;

@for $i from 1 through $num {
    .test#{$i} {
        font-size: 10 * $i + px;  //ここの数値を変える
    }
}


$num: 7;

@for $i from 4 through $num {
    .test#{$i} {
        font-size: 20 * $i + px;　//ここの数値を変える
    }
}

環境構築など準備は大変ですが、一度覚えると結構使いやすいので今回をきっかけに色々な場面で導入していただけると嬉しく思います

また修正箇所あれば、教えていただけると助かります

最後までありがとうございました、ではでは！