Skip to content

Instantly share code, notes, and snippets.

@jyokyoku jyokyoku/gulpfile.js
Last active Jan 31, 2019

Embed
What would you like to do?
ぼくのかんがえたさいきょうのGulpfile
const gulp = require("gulp");
const sass = require('gulp-sass');
const sassGlob = require('gulp-sass-glob');
const plumber = require('gulp-plumber');
const concat = require('gulp-concat');
const sourcemaps = require('gulp-sourcemaps');
const cleanCss = require('gulp-clean-css');
const browserSync = require('browser-sync');
const named = require('vinyl-named');
const ejs = require("gulp-ejs");
const del = require("del");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");
const webpackConfig = require("./webpack.config");
const fs = require('fs');
const listFile = '_list.html';
const dirs = {
'dist': {
'css': 'css/',
'js': 'js/',
'html': 'html/'
},
'tmp': {
'root': './',
'css': 'css/',
'js': 'js/',
'html': 'html/'
},
'src': {
'js': 'src/js/',
'html': 'src/html/',
'ejs': 'src/ejs/',
'scss': 'src/scss/',
},
};
function generateHtmlList() {
try {
fs.statSync(dirs.tmp.html);
} catch (err) {
fs.mkdirSync(dirs.tmp.html);
}
const re = new RegExp('^' + listFile + '$');
const fileList = fs.readdirSync(dirs.tmp.html).filter((file) => {
try {
return fs.statSync(dirs.tmp.html + file).isFile() && /.*\.html$/.test(file) && !re.test(file);
} catch (err) {
return false;
}
});
let htmlLinks = '';
const totals = fileList.length;
fileList.forEach((file) => {
htmlLinks += '<li><a href="' + file + '">' + file + '</a></li>' + "\n";
});
const html = `
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>File List</title></head>
<body>
<p>Totals: ${totals} pages</p>
<ul>${htmlLinks}</ul>
</body>
</html>
`;
fs.writeFileSync(dirs.tmp.html + listFile, html);
}
gulp.task('clean-tmp', () => {
del([dirs.tmp.html + '*', dirs.tmp.css + '*', dirs.tmp.js + '*'], {dot: true});
});
gulp.task('clean-dist', () => {
del([dirs.dist.html + '*', dirs.dist.css + '*', dirs.dist.js + '*'], {dot: true});
});
gulp.task('bs', () => {
browserSync({
server: [dirs.tmp.html, dirs.tmp.root],
index: listFile
});
});
gulp.task('bs-reload', () => {
browserSync.reload();
});
gulp.task('html', () => {
gulp.src([dirs.src.html + '**/*.html'])
.pipe(plumber())
.pipe(ejs())
.pipe(gulp.dest(dirs.tmp.html)).on('end', () => {
generateHtmlList();
});
});
gulp.task('scss', () => {
gulp.src(dirs.src.scss + '**/*.scss')
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(dirs.tmp.css));
});
gulp.task("js", () => {
webpackConfig.mode = 'development';
gulp.src([dirs.src.js + '**/*.js', '!' + dirs.src.js + 'lib/**/*'])
.pipe(plumber())
.pipe(named())
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest(dirs.tmp.js));
});
gulp.task('plugin-css', () => {
gulp.src([
'node_modules/swiper/dist/css/swiper.css',
'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css',
])
.pipe(plumber())
.pipe(concat('plugin.css'))
.pipe(gulp.dest(dirs.tmp.css));
});
gulp.task('build-html', () => {
gulp.src([dirs.src.html + '**/*.html'])
.pipe(plumber())
.pipe(ejs())
.pipe(gulp.dest(dirs.dist.html));
});
gulp.task('build-scss', () => {
gulp.src([dirs.src.scss + '**/*.scss'])
.pipe(plumber())
.pipe(sassGlob())
.pipe(sass({outputStyle: 'expanded'}))
.pipe(cleanCss())
.pipe(gulp.dest(dirs.dist.css));
});
gulp.task('build-js', () => {
webpackConfig.mode = 'production';
webpackConfig.devtool = '';
gulp.src([dirs.src.js + '**/*.js', '!' + dirs.src.js + 'lib/**/*'])
.pipe(plumber())
.pipe(named())
.pipe(webpackStream(webpackConfig, webpack))
.pipe(gulp.dest(dirs.dist.js));
});
gulp.task('build-plugin-css', () => {
gulp.src([
'node_modules/swiper/dist/css/swiper.css',
'node_modules/@fancyapps/fancybox/dist/jquery.fancybox.css',
])
.pipe(plumber())
.pipe(concat('plugin.css'))
.pipe(cleanCss())
.pipe(gulp.dest(dirs.dist.css));
});
gulp.task('build', ['build-html', 'build-scss', 'build-js', 'build-plugin-css']);
gulp.task('watch', ['html', 'scss', 'js', 'plugin-css'], () => {
gulp.watch(dirs.src.scss + '**/*.scss', ['scss']);
gulp.watch(dirs.src.js + '**/*.js', ['js']);
gulp.watch(dirs.src.html + '**/*.html', ['html']);
gulp.watch(dirs.src.ejs + '**/*.ejs', ['html']);
});
gulp.task('watch-bs', ['bs', 'html', 'scss', 'js', 'plugin-css'], () => {
gulp.watch(dirs.src.scss + '**/*.scss', ['scss', 'bs-reload']);
gulp.watch(dirs.src.js + '**/*.js', ['js', 'bs-reload']);
gulp.watch(dirs.src.html + '**/*.html', ['html', 'bs-reload']);
gulp.watch(dirs.src.ejs + '**/*.ejs', ['html', 'bs-reload']);
});
gulp.task('default', ['watch-bs']);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.