Laravelでnpm&Gulpの使い方

まずnode.js & npm が入っているか確認
$ node -v
v8.16.2
$ npm -v
6.4.1

※入っていなければ、repoを追加
$ curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash -
$ yum install -y gcc-c++ make
$ sudo yum install -y nodejs

gulpが入っているか確認
$ gulp -v
CLI version: 2.2.0
Local version: Unknown

※入っていなければ、npmインストール
$ npm i --global gulp

### npm install
プロジェクトのディレクトリでnpm install
$ npm install

dependencyでエラーになるときは、package.jsonを削除して、npm install。その後、必要なモジュールを入れます。

$ npm install gulp-sass –save-dev
$ npm install node-sass@latest
$ npm install laravel-elixir –save-dev

gulpが使えるようになります。
$ gulp

### assetの配置
resourceにjs,sassなどを配置し、gulp, webpackでpublicにコンパイルする
./resources/assets/js
./resources/assets/css
※よくCSSを./public/css/style.cssで編集するチュートリアルを見るが、実際に開発する際には、resources内で開発する

### gulp file編集

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var elixir = require('laravel-elixir');
 
elixir(function(mix) {
    mix.sass('app.scss')
    .styles([
        'libs/blog-post.css',
        'libs/bootstrap.css',
        'libs/bootstrap.min.css',
        'libs/font-awesome.css',
        'libs/metisMenu.css',
        'libs/sb-admin-2.css',
        'libs/styles.css'
    ], './public/css/libs.css')
 
    .scripts([
        'libs/bootstrap.js',
        'libs/bootstrap.min.js',
        'libs/jquery.js',
        'libs/metisMenu.js',
        'libs/sb-admin-2.js',
        'libs/scripts.js'
    ], './public/js/libs.js')
});

### gulp実行
$ gulp

フロントエンドとサーバーサイドを分けて開発するのであれば、sassへのコンパイルはフロント側でやればいいのかもしれないが、フルスタックエンジニアで開発する場合や、保守開発でのフロント編集の場合は、そのまま/resources/assetsで編集して、./publicにコンパイルすれば良いという事です。
こう考えると、フロントエンジニアでもLaravelの仕組みが分かっているとかなりコミュニケーションが楽になりそうですし、フロントエンド・サーバーサイドのスキル・興味関心に応じてどういう体制にするか考えるポイントになりそうです。