行なっていること
- assets/js 配下のjsを
main.js
にまとめる。
- views/*.ejs 配下のxxx.ejs.htmlを変数を埋め込みhtmlに変換する。
- assets/scss配下のxxx.scss.cssを
main.css
にまとめる。
- imageを圧縮して、指定のフォルダに送信
- fontを指定のフォルダに送信
// gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
imagemin = require('gulp-imagemin'),
htmlclean = require('gulp-htmlclean'),
concat = require('gulp-concat'),
deporder = require('gulp-deporder'),
stripdebug = require('gulp-strip-debug'),
uglify = require('gulp-uglify'),
sass = require('gulp-sass'),
postcss = require('gulp-postcss'),
assets = require('postcss-assets'),
autoprefixer = require('autoprefixer'),
mqpacker = require('css-mqpacker'),
cssnano = require('cssnano'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
ejs = require('gulp-ejs'),
fs = require('fs'),
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
}
;
// image processing
gulp.task('images', function() {
var out = folder.build + 'images/';
return gulp.src(folder.src + 'images/**/*')
.pipe(newer(out))
.pipe(imagemin({ optimizationLevel: 5 }))
.pipe(gulp.dest(out));
});
gulp.task('ejs', ['images'], () => {
var json = JSON.parse(fs.readFileSync(folder.src + 'views/var/var.json'));
gulp.src([folder.src + 'views/*.ejs', folder.src + 'views/*.ejs.html'])
.pipe(plumber({
handleError: function (err) {
console.log(err);
this.emit('end');
}
}))
.pipe(ejs(json))
.pipe(rename({extname: ""})) // 拡張子一個目を消す
.pipe(rename({extname: ".html"}))
.pipe(gulp.dest(folder.build + 'html'));
});
// JavaScript processing
gulp.task('js.concat', function() {
var jsbuild = gulp.src([folder.src + 'assets/js/**/*'])
.pipe(deporder())
.pipe(concat('main.js'));
if (!devBuild) {
jsbuild = jsbuild
.pipe(stripdebug())
.pipe(uglify());
}
return jsbuild.pipe(gulp.dest(folder.build + 'assets/js/'));
});
gulp.task( 'font', ['images'], function() {
return gulp.src(
[ folder.src + 'assets/fonts/**' ],
{ base: folder.src }
)
.pipe( gulp.dest(folder.build) );
} );
// CSS processing
gulp.task('scss', ['images', 'font'], function() {
var postCssOpts = [
assets({ loadPaths: ['images/'] }),
autoprefixer({ browsers: ['last 2 versions', '> 2%'] }),
mqpacker
];
if (!devBuild) {
postCssOpts.push(cssnano);
}
return gulp.src([folder.src + 'assets/scss/origin/main.scss', folder.src + 'assets/scss/my_main.scss.css'])
.pipe(sass({
outputStyle: 'nested',
imagePath: 'images/',
precision: 3,
errLogToConsole: true
}))
.pipe(postcss(postCssOpts))
.pipe(concat('main.css'))
.pipe(gulp.dest(folder.build + 'assets/css/'));
});
gulp.task( 'css.min', ['scss'], function() {
return gulp.src(folder.src + 'assets/scss/*.min.css')
.pipe( gulp.dest(folder.build + 'assets/css') );
} );
gulp.task( 'css.image', ['scss'], function() {
return gulp.src(folder.src + 'assets/scss/origin/images/**')
.pipe( gulp.dest(folder.build + 'assets/css/images') );
} );
// watch for changes
gulp.task('watch', function() {
// image changes
gulp.watch(folder.src + 'images/**/*', ['images']);
// html changes
gulp.watch(folder.src + 'views/**/*', ['html']);
// javascript changes
gulp.watch(folder.src + 'assets/js/**/*', ['js']);
// css changes
gulp.watch(folder.src + 'assets/scss/**/*', ['css']);
gulp.watch(folder.src + 'assets/scss/images/**/*', ['css.image']);
// font changes
gulp.watch(folder.src + 'assets/fonts/**/*', ['font']);
});
gulp.task('default', ['run', 'watch']);
gulp.task('html', ['ejs']);
gulp.task('js', ['js.concat']);
gulp.task('css', ['scss', 'css.min', 'css.image']);
gulp.task('run', ['html', 'css', 'js', 'font']);
メモ
jsでファイルの読み込む順番を意識する際は、下記のように先に読み込むファイルを記述する。
/* requires:
origin/jquery.min.js
*/
面倒な作業も発狂しない!Web制作を超効率化するgulp.jsの始め方(2017年版) - WPJ