Web アプリの HTML フロントモック開発プロジェクトを Gulp4.0 対応にし、gulpfile.js を書き換えました。
EJS(HTML)/SCSS でのアプリ UI 作成等にご利用ください。
目次
- Gulp, EJS, SASS, browser-sync の gulpfile サンプル（Gulp4.0対応）
- まとめ
Gulp, EJS, SASS, browser-sync の gulpfile サンプル（Gulp4.0対応）
プロジェクトフォルダ構成
[code]
project
├ src
│ ├ ejs
│ │ ├ _includes
│ │ └ index.ejs
│ ├ fonts
│ ├ images
│ │ └ logo.png
│ ├ js
│ │ └ main.js
│ └ scss
│ └ style.scss
├ public
├ gulpfile.js
├ node_modules
└ package.json
[/code]
public フォルダに静的ファイルが出力されます。
package リスト
- autoprefixer -> CSS ベンタープリフィックス自動付与
- browser-sync -> ファイル更新時にホットリロード
- cssnano -> CSS を Minify する
- del -> ファイル削除に使用
- gulp -> タスクランナー
- gulp-ejs -> EJS コンパイル
- gulp-notify -> 通知
- gulp-plumber -> エラー時の処理停止を回避する
- gulp-postcss -> CSSパーサー（autoprefixer,cssnano）
- gulp-rename -> 出力ファイル名変更
- gulp-replace -> HTML head の CSS にタイムスタンプを追加し書き換える
- gulp-sass -> SASS コンパイル
npm install
[code]
npm install –save-dev autoprefixer browser-sync cssnano del gulp gulp-ejs gulp-notify gulp-plumber gulp-postcss gulp-rename gulp-replace gulp-sass
[/code]
package.json scripts 追加
[code]
“scripts”: {
“build”: “gulp build”,
“clean”: “gulp clean”,
“server”: “gulp”
},
[/code]
gulpfile.js
[code]
const autoprefixer = require(“autoprefixer”);
const browserSync = require(‘browser-sync’);
const cssnano = require(‘cssnano’);
const gulp = require(‘gulp’);
const ejs = require(‘gulp-ejs’);
const sass = require(‘gulp-sass’);
const postcss = require(‘gulp-postcss’);
const notify = require(‘gulp-notify’);
const plumber = require(‘gulp-plumber’);
const rename = require(‘gulp-rename’);
const replace = require(‘gulp-replace’);
const del = require(‘del’);
// paths
const paths = {
src: ‘src’,
dest: ‘public’
}
// browser sync
gulp.task(‘browser-sync’, () => {
return browserSync.init({
server: {
baseDir: paths.dest
},
port: 4000,
reloadOnRestart: true
});
});
// reload
gulp.task(“reload”, (done) => {
browserSync.reload();
done();
});
// EJS
gulp.task(‘ejs’, () => {
var ts = Date.now();
return gulp.src([paths.src + “/ejs/**/*.ejs”, ‘!’ + paths.src + “/ejs/**/_*.ejs”])
.pipe(ejs({}, {}, {
ext: ‘.html’
}))
.pipe(replace(/__NOCACHE__/g, ts)) //replace __NOCACHE__
.pipe(gulp.dest(paths.dest));
});
// SASS
gulp.task(“sass”, () => {
return gulp.src(paths.src + ‘/scss/**/*.scss’, {
sourcemaps: true
})
.pipe(plumber({
errorHandler: notify.onError(‘<%= error.message %>‘),
}))
.pipe(sass({
outputStyle: ‘expanded’
}))
.pipe(gulp.dest(paths.dest + ‘/css/’), {
sourcemaps: ‘./maps’
})
.pipe(rename({
suffix: ‘.min’
}))
.pipe(postcss([
autoprefixer({
browsers: [“last 2 versions”, “ie >= 11”, “Android >= 4”],
cascade: false
}),
cssnano({
autoprefixer: false
})
]))
.pipe(gulp.dest(paths.dest + ‘/css/’), {
sourcemaps: ‘./maps’
})
.pipe(browserSync.stream());
});
// clean
gulp.task(‘clean’, (done) => {
del(paths.dest + ‘/**/*’);
done();
});
// copy fonts
gulp.task(“copy-fonts”, (done) => {
gulp.src(paths.src + “/fonts/**/*”)
.pipe(gulp.dest(paths.dest + “/fonts”));
done();
});
// copy images
gulp.task(“copy-images”, (done) => {
gulp.src(paths.src + “/images/**/*”)
.pipe(gulp.dest(paths.dest + “/images”));
done();
});
// copy js
gulp.task(“copy-js”, (done) => {
gulp.src(paths.src + “/js/**/*.js”)
.pipe(gulp.dest(paths.dest + “/js”));
done();
});
// watch
gulp.task(“watch”, (done) => {
gulp.watch(paths.src + “/scss/**/*.scss”, gulp.series(‘sass’, ‘ejs’, ‘reload’));
gulp.watch(paths.src + “/ejs/**/*.ejs”, gulp.series(‘ejs’, ‘reload’));
done();
});
// scripts tasks
gulp.task(‘default’,
gulp.parallel(‘watch’, ‘browser-sync’)
);
gulp.task(‘build’,
gulp.series(‘clean’,
gulp.series(‘sass’,
gulp.series(‘ejs’,
gulp.parallel(‘copy-fonts’, ‘copy-images’, ‘copy-js’))))
);
[/code]
実行
public フォルダのクリーン&ファイルコピー
[code]
npm run build
[/code]
EJS SASS ウォッチ
[code]
npm run server
[/code]
まとめ
Gulp4.0 アップデートにより gulpfile の更新が必要となりましたが、3.9 と比べ直列・並列処理が実装され、コード全体の見通しもよくなりました。
ちょっとしたフロント開発なら、このプロジェクトでサクサクと進められるので、必要なモジュールを追加しご利用いただければと思います。
この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
