質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

解決済

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

KKsall
KKsall

総合スコア20

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

1回答

0評価

1クリップ

507閲覧

投稿2021/10/07 07:48

編集2021/10/12 15:13

タイトル通りの内容です「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/', 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')); 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; 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 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; const htmlDel = () => { return del(setting.destDir + '*.html') } exports.htmlDel = htmlDel; const webpackJs = () => { return webpackStream(setting.webpack, webpack) .pipe(gulp.dest(setting.assetDistDir + 'js')); }; exports.webpackJs = webpackJs; 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'); }; 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(); };

mixinファイル

$breakpoint-xsm: 320px !default; $breakpoint-sm: 576px !default; $breakpoint-md: 768px !default; $breakpoint-lg: 1000px !default; @mixin xsm { @media screen and ( min-width : ( $breakpoint-xsm ) ) { @content; } } @mixin sm { @media screen and ( min-width : ( $breakpoint-sm ) ) { @content; } } @mixin md { @media screen and ( min-width : ( $breakpoint-md ) ) { @content; } } @mixin lg { @media screen and ( min-width : ( $breakpoint-lg ) ) { @content; } } // mixin @include mq("md") {} $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; } }
@media screen and (min-width: 768px) {←これが一番上に配置される } @media screen and (min-width: 320px) { } @media screen and (min-width: 576px) { } @media screen and (min-width: 1000px) { }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

コンパイル

コンパイルとは、プログラミング言語のテキストソース(ソースコード)をコンピュータ上で実行可能な形式(オブジェクトコード)に変換することをいいます

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。