Gulp4系を使う(その2)

ファイル操作

ファイルを特定のフォルダに移動する

const { src, dest } = require('gulp');

//src配下のjsファイルをすべてdistフォルダにコピーする。
//src/**/*.jsとすると、src配下のすべてのフォルダとその中のjsファイルをdistへコピーする。
exports.default = function() {
  return src('src/*.js')
    .pipe(dest('dist'));
}

SASSをコンパイルする

const { src, dest } = require('gulp');
const sass = require('gulp-sass');

//src/sass/style.scssファイルをコンパイルしてdistフォルダに移動する。
exports.default = function() {
  return gulp.src('./src/sass/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
}

ejsをコンパイルする

/src/data.jsonに格納した情報をsample.ejsに反映し、sample.htmlを出力する。
data.json

{
	"name":"Taro",
	"age" : 28,
	"country" : "Japan"
}

sample.ejs

<p>名前:<%- name %></p>
<p>年齢:<%- age %></p>
<p>出身:<%- country %></p>

gulpfile.js

const { src, dest } = require('gulp');
const ejs = require('gulp-ejs');
const rename = require('gulp-rename');
const plumber= require('gulp-plumber');
const notify= require('gulp-notify');

exports.default= function(){
	var json = JSON.parse(fs.readFileSync('./src/data.json'));
	return gulp.src(["src/sample.ejs",'!' + "src/**/_*.ejs"])
		.pipe(plumber({
			errorHandler: notify.onError('Error: <%= error.message %>')
		}))
		.pipe(gulpEjs(json))
		.pipe(rename({ extname: '.html' }))
		.pipe(gulp.dest("./dist"));
};

ファイルの変更を監視する

const { src, dest } = require('gulp');
const sass = require('gulp-sass');

function compileSass() {
  return gulp.src('./src/sass/style.scss')
    .pipe(sass())
    .pipe(gulp.dest('./dist'))
}

//src/sass配下のstyle.scssファイルが変更されたらsassのコンパイルを行う
function watchFiles(callback) {
	gulp.watch('src/sass/style.scss', {events : ["change"]} , gulp.series(compileSass));
        callback();
}

exports.default = gulp.series(watchFiles);

サーバーを起動する

const { src, dest } = require('gulp');
const browserSync = require('browser-sync')

//dist配下をホストする。
exports.default = function(callback) {
  browserSync({
		server: {
			baseDir: './dist/'
		}
	});
 callback();
}

練習問題

下記のようなフォルダ構成を作成し、index.htmlとstyle.cssがdistフォルダに生成されるようにしてください。
また、src配下のファイルに変更があった場合、自動的に再コンパイルされるようにしてください。
できたら、自動でブラウザもリロードされるようにしてみてください。