編集履歴

質問編集履歴

gulpfileの中身を記述

2020/02/20 00:19

投稿

job_ao

スコア5

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,7 +6,7 @@
 Gulpを使用し、UIkitのscssをインポート、さらに自身で書いたscssファイルをインポートし、
-1つのcssとして出力して使いたいです。
+1つのcss（style.css）として出力して使いたいです。
@@ -14,7 +14,9 @@
 変数が上手く読み込めていないようです。
-variables-theme.scssで数値を変更した場合、反映はされています。
+variables-theme.scssで数値を変更した場合、反映はされていますが、
+Gulpで動かしている時のみ表示されており、cssはきちんと出力されていないようです。
 どのようにしたら、エラーが解消するのでしょうか。
@@ -78,9 +80,411 @@
+gulpfileはこのようになっています
-```ここに言語名を入力
+以下を参考にしました。
+https://yumegori.com/gulp4-setting20191025
+```
+//gulpとgulpのパッケージを読み込み
+const { src, dest, watch, lastRun, parallel, series } = require("gulp");
+const sass = require("gulp-sass");
+const glob = require("gulp-sass-glob");
+const postcss = require("gulp-postcss");
+const autoprefixer = require("autoprefixer");
+const plumber = require("gulp-plumber");
+const notify = require("gulp-notify");
+const htmlmin = require("gulp-htmlmin");
+const del = require("del");
+const ejs = require("gulp-ejs");
+const concat = require("gulp-concat");
+const order = require("gulp-order");
+const rename = require("gulp-rename");
+const cleanCSS = require("gulp-clean-css");
+const pngquant = require("imagemin-pngquant");
+const imagemin = require("gulp-imagemin");
+const mozjpeg = require("imagemin-mozjpeg");
+const uglify = require("gulp-uglify");
+const browserSync = require("browser-sync");
+const replace = require("gulp-replace");
+//開発と本番で処理を分ける
+//今回はhtmlの処理のところで使っています
+const mode = require("gulp-mode")({
+  modes: ["production", "development"],
+  default: "development",
+  verbose: false
+});
+//読み込むパスと出力するパスを指定
+const srcPath = {
+  html: {
+    src: ["./src/_ejs/**/*.ejs", "!" + "./src/_ejs/**/_*.ejs"],
+    dist: "./dist/"
+  },
+  styles: {
+    src: "./src/_scss/**/*.scss",
+    dist: "./dist/assets/css/",
+    map: "./dist/assets/css/map"
+  },
+  scripts: {
+    src: "./src/_js/**/*.js",
+    dist: "./dist/assets/js/",
+    map: "./dist/assets/js/map",
+    core: "src/js/core/**/*.js",
+    app: "src/js/app/**/*.js"
+  },
+  images: {
+    src: "./src/img/**/*.{jpg,jpeg,png,gif,svg}",
+    dist: "./dist/assets/img/"
+  }
+};
+//htmlの処理自動化
+const htmlFunc = () => {
+  return src(srcPath.html.src)
+    .pipe(
+      plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
+    )
+    .pipe(ejs({}, {}, { ext: ".html" })) //ejsを纏める
+    .pipe(rename({ extname: ".html" })) //拡張子をhtmlに
+    .pipe(
+      mode.production(
+        //本番環境のみ
+        htmlmin({
+          //htmlの圧縮
+          collapseWhitespace: true, // 余白を除去する
+          preserveLineBreaks: true, //改行を詰める
+          minifyJS: true, // jsの圧縮
+          removeComments: true // HTMLコメントを除去する
+        })
+      )
+    )
+    .pipe(replace(/[\s\S]*?(<!DOCTYPE)/, "$1"))
+    .pipe(dest(srcPath.html.dist))
+    .pipe(browserSync.reload({ stream: true }));
+};
+//Sassの処理自動化（開発用）
+const stylesFunc = () => {
+  return src(srcPath.styles.src, { sourcemaps: true })
+    .pipe(
+      plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
+    )
+    // .pipe(glob())
+    .pipe(sass({ outputStyle: "expanded" }).on("error", sass.logError))
+    .pipe(
+      postcss([
+        autoprefixer({
+          // IEは11以上、Androidは4、ios safariは8以上
+          // その他は最新2バージョンで必要なベンダープレフィックスを付与する
+          //指定の内容はpackage.jsonに記入している
+          cascade: false,
+          grid: true
+        })
+      ])
+    )
+    .pipe(dest(srcPath.styles.dist, { sourcemaps: "./map" }))
+    .pipe(browserSync.reload({ stream: true }));
+};
+//Sassの処理自動化（本番用）
+const stylesCompress = () => {
+  return src(srcPath.styles.src)
+    .pipe(
+      plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
+    )
+    .pipe(glob())
+    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
+    .pipe(
+      postcss([
+        autoprefixer({
+          //上の指定と同じ
+          cascade: false,
+          grid: true
+        })
+      ])
+    )
-HTML,css(SCSS)
+    .pipe(cleanCSS())
+    .pipe(dest(srcPath.styles.dist))
+    .pipe(browserSync.reload({ stream: true }));
+};
+//scriptの処理自動化
+const scriptFunc = () => {
+  return src(srcPath.scripts.src, { sourcemaps: true })
+    .pipe(order([srcPath.scripts.core, srcPath.scripts.app], { base: "./" }))
+    .pipe(
+      plumber({ errorHandler: notify.onError("Error: <%= error.message %>") })
+    )
+    .pipe(concat("init.js"))
+    .pipe(uglify({ output: { comments: /^!/ } }))
+    .pipe(
+      rename({
+        suffix: ".min"
+      })
+    )
+    .pipe(dest(srcPath.scripts.dist, { sourcemaps: "./map" }))
+    .pipe(browserSync.reload({ stream: true }));
+};
+//画像圧縮の定義
+const imagesBase = [
+  pngquant({
+    quality: [0.7, 0.85]
+  }),
+  // mozjpeg({
+  //   quality: 85
+  // }),
+  imagemin.gifsicle(),
+  imagemin.mozjpeg({
+    quality: 85,
+    progressive: true
+  }),
+  imagemin.optipng(),
+  imagemin.svgo({
+    removeViewBox: false
+  })
+];
+//画像の処理自動化
+const imagesFunc = () => {
+  return src(srcPath.images.src, { since: lastRun(imagesFunc) })
+    .pipe(plumber({ errorHandler: notify.onError("<%= error.message %>") }))
+    .pipe(imagemin(imagesBase))
+    .pipe(dest(srcPath.images.dist));
+};
+// マップファイル除去
+const cleanMap = () => {
+  return del([srcPath.styles.map, srcPath.scripts.map]);
+};
+// ブラウザの読み込み処理
+const browserSyncFunc = () => {
+  browserSync({
+    server: {
+      baseDir: "./dist/",
+      index: "index.html"
+    },
+    reloadOnRestart: true
+  });
+};
+// ファイルに変更があったら反映
+const watchFiles = () => {
+  watch(srcPath.html.src, htmlFunc);
+  watch(srcPath.styles.src, stylesFunc);
+  watch(srcPath.scripts.src, scriptFunc);
+  watch(srcPath.images.src, imagesFunc);
+};
+exports.default = parallel(watchFiles, browserSyncFunc); //gulpの初期処理
+exports.build = parallel(htmlFunc, stylesFunc, scriptFunc, imagesFunc);
+exports.sasscompress = stylesCompress;
+exports.cleanmap = cleanMap;
 ```