Skip to content

Instantly share code, notes, and snippets.

@tama441 tama441/gulp2.js
Created Jun 2, 2019

Embed
What would you like to do?
// **********************************************
// require
// **********************************************
const gulp = require("gulp");
const sass = require("gulp-sass");
const plumber = require("gulp-plumber");
const del = require("del");
const concat = require("gulp-concat");
const autoprefixer = require("gulp-autoprefixer");
const notify = require("gulp-notify");
const pug = require("gulp-pug");
const changed = require("gulp-changed");
const vinylPaths = require("vinyl-paths");
const cache = require("gulp-cached");
const browsersync = require("browser-sync").create();
//画像処理
const imagemin = require("gulp-imagemin");
const imageminJpg = require("imagemin-jpeg-recompress");
const imageminPng = require("imagemin-pngquant");
const imageminGif = require("imagemin-gifsicle");
const svgmin = require("gulp-svgmin");
// **********************************************
// command
// **********************************************
//SCSSをCSSに変換する scssCompile
//HTMLをPugからコンパイル pug
//両方をコンパイル compileSet
// distとsrcのコンパイル同期 dist
//CSSだけの移動と結合 cssRun
//コンパイルと同期をウォッチ状態に watch
// ブラウザを立ち上げて同期 default
// **********************************************
// setting : paths
// **********************************************
var paths = {
srcDir: "./src",
srcEnDir: "./src/english",
distDir: "./dist",
distEnDir: "./dist/english",
oldDir: "./website1",
oldEnDir: "./website1/english"
};
var pages =
"{home,common,mission,service,activity,whoweare,company,trial,news_page,news_top,contact_imput,contact_confirm,contact_completion}";
// **********************************************
// src内でのファイルコンパイル
// **********************************************
//SCSSをCSSに変換する
gulp.task("scssCompile_ja", () => {
var scss = paths.srcDir + "/scss/";
var css = paths.srcDir + "/scss/css/";
var scssFiles = [scss + "*.scss"];
return gulp
.src(scssFiles)
.pipe(cache("sass"))
.pipe(
plumber({
errorHandler: notify.onError({
title: "SCSS失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(
sass({
outputStyle: "expanded"
})
)
.pipe(
autoprefixer({
browsers: ["last 6 versions"]
})
)
.pipe(gulp.dest(css));
});
gulp.task("scssCompile_en", () => {
var scss = paths.srcEnDir + "/scss/";
var css = paths.srcEnDir + "/scss/css/";
var scssFiles = [scss + "*.scss"];
return gulp
.src(scssFiles)
.pipe(cache("sass"))
.pipe(
plumber({
errorHandler: notify.onError({
title: "失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(
sass({
outputStyle: "expanded"
})
)
.pipe(
autoprefixer({
browsers: ["last 6 versions"]
})
)
.pipe(gulp.dest(css));
});
gulp.task("scssCompile", gulp.parallel(["scssCompile_ja", "scssCompile_en"]));
//HTMLをPugからコンパイル
gulp.task("pug_jp", () => {
var srcGrob = paths.srcDir;
var pugGrob = paths.srcDir + "/pug";
return gulp
.src([
pugGrob + "/**/*.pug",
"!" + pugGrob + "/**/_*.pug",
"!" + pugGrob + "/english/**/*.pug"
])
.pipe(
plumber({
errorHandler: notify.onError({
title: "jaPUG失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(srcGrob, { extension: ".html" }))
.pipe(
pug({
pretty: true
})
)
.pipe(gulp.dest(srcGrob));
});
gulp.task("pug_en", () => {
var pugGrob = paths.srcDir + "/pug/english";
var srcGrob = paths.srcEnDir;
return gulp
.src([pugGrob + "/**/*.pug", "!" + pugGrob + "/**/_*.pug"])
.pipe(
plumber({
errorHandler: notify.onError({
title: "enPUG失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(srcGrob, { extension: ".html" }))
.pipe(
pug({
pretty: true
})
)
.pipe(gulp.dest(srcGrob));
});
gulp.task("pug", gulp.parallel(["pug_jp", "pug_en"]));
gulp.task("compileSet", gulp.parallel(["scssCompile", "pug"]));
// **********************************************
// distとsrcのコンパイル同期
// **********************************************
// 日本語サイト画像の圧縮タスク
gulp.task("imagemin", () => {
var srcGlob = paths.srcDir + "/img/**/*.{jpg,jpeg,png,gif,rtf}";
var distGlob = paths.distDir + "/img/";
return (
gulp
.src(srcGlob)
// .pipe(plumber({
// errorHandler: notify.onError({
// title: "画像圧縮失敗してるよ!", // 任意のタイトルを表示させる
// message: "<%= error.message %>" // エラー内容を表示させる
// })
// }))
.pipe(changed(distGlob))
.pipe(
imagemin([
imageminPng(),
imageminJpg(),
imageminGif({
interlaced: false,
optimizationLevel: 3,
colors: 180
})
])
)
.pipe(gulp.dest(distGlob))
);
});
gulp.task("svgmin", function() {
var srcGlob = paths.srcDir + "/img/**/*.svg";
var distGlob = paths.distDir + "/img/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "画像圧縮失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(svgmin())
.pipe(gulp.dest(distGlob));
});
// 英語サイト画像の圧縮タスク
gulp.task("imagemin_en", () => {
var srcGlob = paths.srcEnDir + "/img/**/*.{jpg,jpeg,png,gif,rtf}";
var distGlob = paths.distEnDir + "/img/";
return (
gulp
.src(srcGlob)
// .pipe(plumber({
// errorHandler: notify.onError({
// title: "画像圧縮失敗してるよ!", // 任意のタイトルを表示させる
// message: "<%= error.message %>" // エラー内容を表示させる
// })
// }))
.pipe(changed(distGlob))
.pipe(
imagemin([
imageminPng(),
imageminJpg(),
imageminGif({
interlaced: false,
optimizationLevel: 3,
colors: 180
})
])
)
.pipe(gulp.dest(distGlob))
);
});
gulp.task("svgmin_en", function() {
var srcGlob = paths.srcEnDir + "/img/**/*.svg";
var distGlob = paths.distEnDir + "/img/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "画像圧縮失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(svgmin())
.pipe(gulp.dest(distGlob));
});
gulp.task("html", function() {
var srcGlob = paths.srcDir + "/**/*.html";
var distGlob = paths.distDir;
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(gulp.dest(distGlob));
});
//ページ内容以外のCSSの移動
gulp.task("css_ja", function() {
var srcGlob = paths.srcDir + "/scss/css/normalize.css";
var distGlob = paths.distDir + "/css/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(gulp.dest(distGlob));
});
gulp.task("css_en", function() {
var srcGlob = paths.srcDir + "/scss/css/{normalize,hamburgers}.css";
var distGlob = paths.distEnDir + "/css/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(gulp.dest(distGlob));
});
gulp.task("cssDist", gulp.parallel(["css_ja", "css_en"]));
//CSSを結合する
gulp.task("cssConcat_jp", () => {
var srcGlob = paths.srcDir + "/scss/css/";
var distGlob = paths.distDir + "/css/";
var cssFiles = [srcGlob + "*.css", "!" + srcGlob + "normalize.css"];
return gulp
.src(cssFiles)
.pipe(
plumber({
errorHandler: notify.onError({
title: "CSS失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(concat("stylesheet.css"))
.pipe(gulp.dest(distGlob));
});
gulp.task("cssConcat_en-pc", () => {
var srcGlob = paths.srcEnDir + "/scss/css/";
var distGlob = paths.distEnDir + "/css/";
var cssFiles = [srcGlob + "stylesheet-" + pages + ".css"];
return gulp
.src(cssFiles)
.pipe(
plumber({
errorHandler: notify.onError({
title: "CSS失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(concat("stylesheet.css"))
.pipe(gulp.dest(distGlob));
});
gulp.task("cssConcat_en-mb", () => {
var srcGlob = paths.srcEnDir + "/scss/css/";
var distGlob = paths.distEnDir + "/css/";
var cssFiles = [srcGlob + "responsive-" + pages + ".css"];
return gulp
.src(cssFiles)
.pipe(
plumber({
errorHandler: notify.onError({
title: "CSS失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(concat("responsive.css"))
.pipe(gulp.dest(distGlob));
});
gulp.task(
"cssConcat",
gulp.parallel(["cssConcat_jp", "cssConcat_en-pc", "cssConcat_en-mb"])
);
var cssSet = ["cssDist", "cssConcat"];
gulp.task("cssRun", gulp.series(cssSet));
gulp.task("js", function() {
var srcGlob = paths.srcDir + "/js/*.js";
var distGlob = paths.distDir + "/js/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(gulp.dest(distGlob));
});
gulp.task("en", function() {
var srcGlob = paths.srcDir + "/english";
var distGlob = paths.distDir + "/english";
return gulp
.src([
srcGlob + "/**/*",
"!" + srcGlob + "/**/_DS_Store",
"!" + srcGlob + "/scss",
"!" + srcGlob + "/scss/*",
"!" + srcGlob + "/scss/css/*"
])
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(changed(distGlob))
.pipe(gulp.dest(distGlob));
});
gulp.task("thumbnail", function() {
var srcGlob = paths.srcDir + "/*.{png,ico}";
var distGlob = paths.distDir;
var distEnGlob = paths.distDir + "/english/";
return gulp
.src(srcGlob)
.pipe(
plumber({
errorHandler: notify.onError({
title: "dist移行失敗してるよ!", // 任意のタイトルを表示させる
message: "<%= error.message %>" // エラー内容を表示させる
})
})
)
.pipe(gulp.dest(distGlob))
.pipe(gulp.dest(distEnGlob));
});
var distSet = ["imagemin", "svgmin", "html", "cssRun", "js", "en", "thumbnail"];
gulp.task("move", gulp.parallel(distSet));
var image_en = ["imagemin_en", "svgmin_en"];
gulp.task("image_en", gulp.parallel(image_en));
gulp.task("dist", gulp.series("move", "image_en"));
// サーバーを立ち上げる
gulp.task("build-server", function(done) {
browsersync.init({
server: {
baseDir: "dist"
}
});
done();
console.log("Server was launched");
});
// ブラウザのリロード
gulp.task("browser-reload", function(done) {
browsersync.reload();
done();
console.log("Browser reload completed");
});
//タスクをwatch状態に
gulp.task("watch", function() {
gulp.watch(
paths.srcDir + "/**/*",
gulp.series("compileSet", "dist", "browser-reload")
);
});
// タスクの実行
gulp.task(
"default",
gulp.series("build-server", "watch", function(done) {
done();
console.log("Default all task done!");
})
);
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.