質問編集履歴

修正

2021/10/12 15:13

投稿

KKsall

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -182,68 +182,6 @@
-const imageMin = () => {
-  return gulp
-    .src(setting.assetSrcDir + 'img/**')
-    // .pipe(changed(setting.assetDistDir + 'img'))
-    .pipe(
-      gulpImagemin([
-        pngquant({
-          quality: [.60, .70], // 画質
-          speed: 1 // スピード
-        }),
-        mozjpeg({quality: 65}), // 画質
-        gulpImagemin.svgo(),
-        gulpImagemin.optipng(),
-        gulpImagemin.gifsicle({optimizationLevel: 3}) // 圧縮率
-      ])
-    )
-    .pipe(gulp.dest(setting.assetDistDir + 'img'));
-}
-exports.imageMin = imageMin;
-const imageDel = () => {
-  return del(setting.assetDistDir + 'img')
-}
-exports.imageDel = imageDel;
 const ejsCompile = () => {
   return gulp.src(ejs_src)
@@ -296,8 +234,6 @@
 const webpackJs = () => {
-  // webpackStreamの第2引数にwebpackを渡す
   return webpackStream(setting.webpack, webpack)
     .pipe(gulp.dest(setting.assetDistDir + 'js'));
@@ -372,24 +308,6 @@
-exports.default = gulp.series(
-  gulp.parallel(
-    gulp.series(lintSass, sassCompile),
-    gulp.series(htmlDel, ejsCompile),
-    sync
-  ), watchFiles
-);
 ```
 mixinファイル

修正

2021/10/12 15:13

投稿

KKsall

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -62,19 +62,19 @@
   },
-  srcDir: 'docroot/html/', //ソースコードの存在するベースのディレクトリ
+  srcDir: 'docroot/html/',
-  destDir: 'docroot/html/', //コンパイル後に出力するベースのディレクトリ
+  destDir: 'docroot/html/',
-  destRoot: 'docroot/html/', //出力するドキュメントルート
+  destRoot: 'docroot/html/',
-  jsonDir: 'docroot/_json/', //json格納ディレクトリ
+  jsonDir: 'docroot/_json/',
   tmplDir: 'docroot/_templates/',
-  assetSrcDir: 'docroot/_src/', // アセットファイルのソースディレクトリ
+  assetSrcDir: 'docroot/_src/',
-  assetDistDir: 'docroot/html/assets/', // アセットファイルの出力先ディレクトリ
+  assetDistDir: 'docroot/html/assets/',
   webpack: require("./webpack.config")
@@ -96,11 +96,7 @@
-/**
- * SCSS整形
- */
 const lintSass = () => {
@@ -140,13 +136,7 @@
-/**
- * SCSSコンパイル
- * @returns {*}
- */
 const sassCompile = () => {
@@ -194,11 +184,7 @@
-/**
- * 画像圧縮
- */
 const imageMin = () => {
@@ -242,11 +228,7 @@
-/**
- * 圧縮済み画像全削除
- */
 const imageDel = () => {
@@ -260,11 +242,7 @@
-/**
- * ejs task
- */
 const ejsCompile = () => {
@@ -300,11 +278,7 @@
-/**
- * 出力されたHTML全削除
- */
 const htmlDel = () => {
@@ -318,13 +292,7 @@
-/**
- * Webpack JSトランスパイル
- * @returns {*}
- */
 const webpackJs = () => {
@@ -342,13 +310,7 @@
-/**
- * オートリロード
- * @param done - コールバック
- */
 const sync = done => {
@@ -386,13 +348,7 @@
-/**
- * ファイル監視
- * @param done - コールバック
- */
 const watchFiles = done => {
@@ -416,11 +372,7 @@
-/**
- * デフォルト処理
- */
 exports.default = gulp.series(

修正

2021/10/12 13:53

投稿

KKsall

スコア25

test CHANGED Viewed

	@@ -1 +1 @@
1	- gulpのcssコンパイルで~~mixinで指定した通り~~メディアクエリが~~cssにでない~~
1	+ gulpのcssコンパイルで小さな画面サイズから大きな画面サイズへと順にメディアクエリを出力したいのですが、順序が崩れてしまう

test CHANGED Viewed

@@ -1,5 +1,445 @@
 タイトル通りの内容です「gulpのcssコンパイルでmixinで指定した通りメディアクエリがcssにでないです
+gulpファイル
+```ここに言語を入力
+// gulpfile.js
+const gulp = require('gulp'),
+  bs = require('browser-sync'),
+  changed = require('gulp-changed'),
+  plumber = require('gulp-plumber'),
+  gulpSass = require('gulp-sass'),
+  sourcemaps = require('gulp-sourcemaps'),
+  bourbon = require('node-bourbon'),
+  gulpPostcss = require('gulp-postcss'),
+  autoprefixer = require('autoprefixer'),
+  stylelint = require('stylelint'),
+  rename = require('gulp-rename'),
+  sortMediaQueries = require("node-css-mqpacker"),
+  gulpImagemin = require('gulp-imagemin'),
+  mozjpeg = require('imagemin-mozjpeg'),
+  pngquant = require('imagemin-pngquant'),
+  ejs = require('gulp-ejs'),
+  fs = require('fs'),
+  del = require('del'),
+  notify = require('gulp-notify'),
+  htmlbeautify = require("gulp-html-beautify"),
+  webpackStream = require("webpack-stream"),
+  webpack = require("webpack");
+const setting = {
+  prefixer: {
+    cascade: false,
+    grid: "autoplace"
+  },
+  srcDir: 'docroot/html/', //ソースコードの存在するベースのディレクトリ
+  destDir: 'docroot/html/', //コンパイル後に出力するベースのディレクトリ
+  destRoot: 'docroot/html/', //出力するドキュメントルート
+  jsonDir: 'docroot/_json/', //json格納ディレクトリ
+  tmplDir: 'docroot/_templates/',
+  assetSrcDir: 'docroot/_src/', // アセットファイルのソースディレクトリ
+  assetDistDir: 'docroot/html/assets/', // アセットファイルの出力先ディレクトリ
+  webpack: require("./webpack.config")
+};
+bourbon.with('assets/css/**/*.css', setting.assetSrcDir + 'scss/**/*.scss');
+const ejs_src = [
+  setting.tmplDir + "page/**/*.ejs"
+];
+const json_src = JSON.parse(fs.readFileSync(setting.jsonDir + 'config.json'));
+/**
+ * SCSS整形
+ */
+const lintSass = () => {
+  return gulp
+    .src(setting.assetSrcDir + 'scss/**/*.scss', {
+      since: gulp.lastRun(lintSass)
+    })
+    .pipe(plumber())
+    .pipe(gulpPostcss([
+      stylelint({
+        fix: true,
+        // reporters: [
+        //     { formatter: "string", console: true }
+        // ]
+      })
+    ], {syntax: require('postcss-scss')}))
+    .pipe(gulp.dest(setting.assetSrcDir + 'scss'));
+}
+exports.lintSass = lintSass;
+/**
+ * SCSSコンパイル
+ * @returns {*}
+ */
+const sassCompile = () => {
+  const processors = [
+    autoprefixer(setting.prefixer),
+    sortMediaQueries()
+  ];
+  return gulp.src([
+    setting.assetSrcDir + 'scss/**/*.scss',
+    '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
+  ])
+    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
+    .pipe(sourcemaps.init())
+    .pipe(gulpSass({
+      includePaths: bourbon.includePaths,
+      outputStyle: 'expanded'
+    }))
+    .pipe(gulpPostcss(processors))
+    .pipe(sourcemaps.write('./maps'))
+    .pipe(gulp.dest(setting.assetDistDir + 'css'));
+};
+exports.sassCompile = sassCompile;
+/**
+ * 画像圧縮
+ */
+const imageMin = () => {
+  return gulp
+    .src(setting.assetSrcDir + 'img/**')
+    // .pipe(changed(setting.assetDistDir + 'img'))
+    .pipe(
+      gulpImagemin([
+        pngquant({
+          quality: [.60, .70], // 画質
+          speed: 1 // スピード
+        }),
+        mozjpeg({quality: 65}), // 画質
+        gulpImagemin.svgo(),
+        gulpImagemin.optipng(),
+        gulpImagemin.gifsicle({optimizationLevel: 3}) // 圧縮率
+      ])
+    )
+    .pipe(gulp.dest(setting.assetDistDir + 'img'));
+}
+exports.imageMin = imageMin;
+/**
+ * 圧縮済み画像全削除
+ */
+const imageDel = () => {
+  return del(setting.assetDistDir + 'img')
+}
+exports.imageDel = imageDel;
+/**
+ * ejs task
+ */
+const ejsCompile = () => {
+  return gulp.src(ejs_src)
+    .pipe(plumber({errorHandler: notify.onError("Error: <%= error.message %>")}))
+    .pipe(ejs({json: json_src}))
+    .pipe(rename({extname: '.html'}))
+    .pipe(htmlbeautify({
+      "indent_size": 4,
+      "indent_char": " ",
+      "max_preserve_newlines": 0,
+      "preserve_newlines": false,
+      "extra_liners": [],
+    }))
+    .pipe(gulp.dest(setting.destDir));
+}
+exports.ejsCompile = ejsCompile;
+/**
+ * 出力されたHTML全削除
+ */
+const htmlDel = () => {
+  return del(setting.destDir + '*.html')
+}
+exports.htmlDel = htmlDel;
+/**
+ * Webpack JSトランスパイル
+ * @returns {*}
+ */
+const webpackJs = () => {
+  // webpackStreamの第2引数にwebpackを渡す
+  return webpackStream(setting.webpack, webpack)
+    .pipe(gulp.dest(setting.assetDistDir + 'js'));
+};
+exports.webpackJs = webpackJs;
+/**
+ * オートリロード
+ * @param done - コールバック
+ */
+const sync = done => {
+  const initObj = {
+    port: 8080,
+    server: setting.destRoot,
+    reloadOnRestart: true,
+    notify: false,
+    ghostMode: false
+  };
+  bs.init(initObj);
+  done();
+};
+const browserReload = done => {
+  bs.reload();
+  done();
+  console.log('Browser reload completed');
+};
+/**
+ * ファイル監視
+ * @param done - コールバック
+ */
+const watchFiles = done => {
+  gulp.watch([setting.assetSrcDir + 'img/**/*'], {interval: 500}, gulp.series(imageMin, browserReload));
+  gulp.watch([setting.assetSrcDir + 'js/**/*.js'], {interval: 500}, gulp.series(webpackJs, browserReload));
+  gulp.watch([setting.tmplDir + '**/*.ejs'], {interval: 500}, gulp.series(ejsCompile, browserReload));
+  gulp.watch([
+    setting.assetSrcDir + 'scss/**/*.scss',
+    '!' + setting.assetSrcDir + 'scss/lib-admin/**/*.scss'
+  ], {interval: 200}, gulp.series(sassCompile, browserReload));//lintSass,
+  done();
+};
+/**
+ * デフォルト処理
+ */
+exports.default = gulp.series(
+  gulp.parallel(
+    gulp.series(lintSass, sassCompile),
+    gulp.series(htmlDel, ejsCompile),
+    sync
+  ), watchFiles
+);
+```
 mixinファイル
 ```ここに言語を入力

修正

2021/10/12 13:49

投稿

KKsall

スコア25

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -86,28 +86,6 @@
   }
-}$breakpoints: (
-  "xsm":"screen and (min-width: 320px)",
-  "sm":"screen and (min-width: 576px)",
-  "md":"screen and (min-width: 768px)",
-  "lg":"screen and (min-width: 1000px)",
-) !default;
-@mixin mq($breakpoint: xsm) {
-  @media #{map-get( $breakpoints, $breakpoint )} {
-    @content;
-  }
 }
 ```