タスクランナーGulpでいろいろ自動コンパイルさせてみたお話

Gulpとは

Node.js製で作られており
同じ作業をするのは無駄なので作業を自動化してくれるツールです。

じゃあ、何ができるのか？

• 例えば
  • Scssを自動でコンパイルさせたい　 (大丈夫できます)
  • HamlやJadeでをコンパイルさせたい (大丈夫できます)
  • markdownから、htmlを自動で生成したい　(大丈夫できます)
  • 等々

必要なこと

• NodeJsのインストール
• npmの理解

早速やっていきたいと思います。

• 作業ディレクトリに行き、npm_moduleのインストール

terminal

cd workDirectory
npm i

• 次にgulpfile.jsを作成します。

terminal

touch gulpfile.js

まだ起動できません

• gulpfileにどんどん記述して見たいと思います。
• 今回はScssとMarkDownを入れてみたいと思います。
• まずScssを導入していきたいと思います。

gulpfile.js

var gulp = require('gulp');

var sass = require('gulp-sass');
var plumber = require('gulp-plumber');

var dir = {
  watchScss : "*.scss",
  exportCss : "./"
};

// Sassコンパイルタスク
gulp.task('scss', function(event) {
  return gulp.src(dir.watchScss)
    // エラーが気た時に処理が落ちるのでplumberでカバー
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dir.exportCss))
});

// gulp.watch(dir, [task set name]);
gulp.task('watch',function(event){
    gulp.watch(dir.watchScss,['scss']);
});


gulp.task('default',['watch']);

gulpを起動

-gulp等のnpmが入っていないので入れましょう

terminal

npm install gulp
npm install gulp-sass
npm install gulp-plumber
gulp

次にMarkDownを入れてみましょう

gulpfile.js

var gulp = require('gulp');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var markdownDocs = require('gulp-markdown-docs');
var dir = {
  watchScss : "*.scss",
  watchReadme : "./README.md",
  exportCss : "./",
  exportReadme : "./README.html"
};

// Sassコンパイルタスク
gulp.task('scss', function(event) {
  return gulp.src(dir.watchScss)
    // エラーが気た時に処理が落ちるのでplumberでカバー
    .pipe(plumber())
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest(dir.exportCss))
});

// markdown コンパイルタスク
gulp.task('readme', function () {
  return gulp.src(dir.watchReadme)
    .pipe(markdown({encodings: "UTF-8"}))
    .pipe(gulp.dest(dir.exportReadme));
});

// readme task set
gulp.task('readme', function () {
  return gulp.src('*.md')
    .pipe(markdownDocs('README.html', {
        layoutStylesheetUrl: 'markdown.css'
  }))
    .pipe(gulp.dest('./'));
});

// gulp.watch(dir, [task set name]);
gulp.task('watch',function(event){
    gulp.watch(dir.watchScss,['scss']);
    gulp.watch(dir.watchReadme,['readme']);
});

gulp.task('default',['watch']);

gulpを起動

-Markdownのnpmが入っていないので入れましょう

terminal

npm install gulp-markdown-docs
gulp

最後に

layoutStylesheetUrl: 'markdown.css'

とありますがこれは、MarkdownのHTMLしかgulpでは吐き出してくれないので
markdown.cssというファイルを作りcssを読み込ます作業が必要となります。
参考にしたcssです。
https://gist.github.com/tuzz/3331384

自動更新はされたでしょうか？
作ったものは載せておくのでいじってみてください。
いろいろ自動化していきましょう。
お疲れ様でした。