gulpでdjangoのrunserverとsassのコンパイルを同時にしたい

概要

• html変更したら、その都度、djangoのrunserverしたい
• sassもコンパイルしたい
• sass変更したら、その都度、djangoのrunserverしたい

gulpでsassのコンパイル自動化、browser-syncとかの記事は、よく見かけたのですが、djangoでサービス作っているときに、gulpでrunserverとsassの自動化を同時にやろうとしたときに、つまづいたので記事化しました。

もっと他にいいやり方があるかもしれませんので、ご参考程度に。

gulpfile.jsの中身

gulpfile.js

gulpfile.js

const gulp = require('gulp');
const plumber = require('gulp-plumber');
const sass = require('gulp-sass');
const notify  = require('gulp-notify');
const child = require('child_process');

const paths = {
  'src': {
    'scss': './static/scss/*.scss',
    'html': './app/templates/**/*.html',
  },
  'dist': {
    'css': './static/css/',
  }
};
var server = null;

gulp.task('sass', function() {
  console.log('sass start!!');
	var stream = gulp.src(paths.src.scss)
    .pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sass({
        outputStyle: 'compact'
    }))
    .pipe(gulp.dest(paths.dist.css))
    .pipe(notify({
        title: 'Sass file is compiled',
        message: new Date(),
        sound: 'Tink'
    }));

    return stream;

});

gulp.task('server:spawn', function(cb) {
  if (server) {
    server.kill();
    console.log("kill task done!");
  }

  server = child.spawn('python', ['manage.py', 'runserver'], { 
    stdio: 'inherit'
  });

  server.on('close', (code) => {
    if (code !== 0) {
      cb(code);
      console.error('Django runserver exited with error code: ' + code);
    } else {
      cb();
      console.log('Django runserver exited normally.');
    }
  });
});

/// 監視フォルダ ////////////////////////////////////////////
gulp.task('watch', function(){
  gulp.watch(paths.src.scss, gulp.series('sass'));
  gulp.watch(paths.src.scss, gulp.series('server:spawn'));
  gulp.watch(paths.src.html, gulp.series('server:spawn'));
  console.log('gulp watch started');
});

gulp.task('default', gulp.series('watch'), function(){
  console.log('Default all task done!');
});

詳細の覚書

ずっと、server:spawnだけが毎度呼び出されて、sassが動かなくて躓いていました。これは、非同期処理の返り値に問題がありました。
今回のコードでは gulp.task('server:spawn', function(cb) { としていて、タスク完了を伝えるcallback関数をつかっています。
このタスク完了がないがために、他のタスクが動かないだとか、「このポートは使われている」といったエラーがでてしまいました。

この記事が、とても参考になりました。
http://js.studio-kingdom.com/gulp/gulp_task/
https://qiita.com/morou/items/d54000396a2a7d0714de

.js

gulp.task('server:spawn', function(cb) {
  if (server) {
    server.kill();
    console.log("kill task done!");
  }

  server = child.spawn('python', ['manage.py', 'runserver'], { 
    stdio: 'inherit'
  });

  server.on('close', (code) => {
    if (code !== 0) {
      cb(code);
      console.error('Django runserver exited with error code: ' + code);
    } else {
      cb();
      console.log('Django runserver exited normally.');
    }
  });
});

ちなみに、sassのタスクでは、streamを返すようにしています。
sassのコンパイルのような、pipeでつなぐようなものは、stream
runserverのような、エラー時のハンドリングもしたい場合は、callback用の関数なんですかね。

参考サイト

https://qiita.com/morou/items/d54000396a2a7d0714de
http://js.studio-kingdom.com/gulp/gulp_task/
https://stackoverflow.com/questions/35531334/how-to-use-gulp-browsersync-with-django