03_5_Gulp - hpscript/laravel GitHub Wiki

node.js & npm

$ node -v $ npm -v

※入っていなければ、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

※入っていなければ、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

assetの配置

resourceにjs,sassなどを配置し、gulp, webpackでpublicにコンパイル ./resources/assets/js ./resources/assets/css

gulp file編集

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