LoginSignup
0
0

More than 3 years have passed since last update.

gulp導入(自分用)

Last updated at Posted at 2019-06-16

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0