node.js導入済み
1.gulpのインストール
sudo npm install -g gulp
ファイル移動後
sudo npm install --save-dev gulp
npm init -y
#package.json作成
npm install gulp-sass --save-dev
#gulp-sassをインストール
2.gulpfile.jsファイルの作成
プロジェクト直下にgulpfile.js作成
3.gulpfileでコンパイルできるよう変更
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
// sassというタスクを定義していきます。
gulp.task('sass', function(){
return gulp.src('./src/sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./deploy/css/'));
});
4.watchして変更あれば自動コンパイル
'use strict';
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function(){
return gulp.src('./src/sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./deploy/css/'));
});
gulp.task('watch', function(){
gulp.watch('./src/sass/**/*.scss', gulp.task('sass'));
})
gulp.task('default', gulp.series('sass'),function(){
gulp.start('watch');
});
v3→v4の変更があるので、taskの中身などが違う
https://aimstogeek.hatenablog.com/entry/2018/11/30/192238
sass内でreturn入れるか何かして処理を終わらせないとエラー出る。
参考
http://www.gipservice.com/blog/0915/
http://hitasurajs.hatenablog.jp/entry/2017/06/20/211133