Dart Sassを使う準備＆gulp（備忘録）

npm install sass

@forward "variables";
@forward "mixin";

//名前空間を設定しない
@use "../global" as *;
//使用する
変数名

//ファイル名が名前空間
@use "../global";
//使用する
global.変数名

//名前空間を指定する場合
@use "../global" as g;
//使用する
g.変数名

@use "page/home";
@use "component/button";
.
.
.

@use "../global" as *;
@use "../common" as *;

$breakpoints: (
  // 600px以上
  'md': 'screen and (min-width: 600px)',
  // 1024px以上(iPadminiの横幅でiPadProの縦幅)
  //個人的には2カラム(サイドバーありの場合)のカラム落ちのポイントです
  'lg': 'screen and (min-width: 1024px)',
) !default;

@mixin mq($breakpoint: md) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

//使用するとき
@use "../global" as *;
 @include mq(md){

}
 @include mq(lg){

}

@use "../globals" as *; //メディアクエリを使うため
.sm {
  font-size: 0.75rem;
  @include mq(lg) {
    font-size: 1rem;
  }
}
.md {
  font-size: 1.25rem;
  @include mq(lg) {
    font-size: 1.5rem;
  }
}
.lg {
  font-size: 1.5rem;
  @include mq(lg) {
    font-size: 2rem;
  }
}
.main-title {
    @extend .lg;
    font-weight: 600;
}

//可変にしてしまう場合(メディアクエリ不要)
.sm {
 font-size: clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
}

@use "../global" as *; //変数$maxWidthやメディアクエリを使うため
.wrapper {
  width: 90%;
  margin: 0 auto;
  max-width: $maxWidth;
}
//最大幅を設定しない
.wrapper{
  padding: 0 5vw;
}
//カラム
.flex {
  display: flex;
  flex-direction: column;
  @include mq(md) {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

{
  "scripts": {
    "sass": "sass --watch scss:css"
  }
}

gulp.task(name[, deps], fn)
//gulp.task()がgulp4で非推奨になり
gulp.task('task', () => {
  ...
})
//関数宣言とexportsが推奨
function task() { 
  ...
}
exports.task = task; // `gulp task`で実行可能

npm install --save-dev gulp
#babel
npm install --save-dev @babel/register @babel/core @babel/preset-env 

{
  "presets": [ "@babel/preset-env" ]
}

#Dart Sassをトランスパイル
npm install gulp-dart-sass --save-dev　
#CSSの圧縮(Minify)
npm install gulp-clean-css --save-dev
#gulpの処理中にifが使える
npm install gulp-if --save-dev 
#ソースマップを作成する(gulp-dart-sassもOK)
npm install gulp-sourcemaps --save-dev 
#ベンダープレフィックスを付与
npm install gulp-autoprefixer --save-dev 

import gulp from "gulp";
import sass from "gulp-dart-sass";
import cleanCSS from "gulp-clean-css";
import gulpif from "gulp-if";
import sourcemaps from "gulp-sourcemaps";
import autoprefixer from "gulp-autoprefixer";

const PRODUCTION = process.argv[3] !== undefined;

export const style = () => {
  return gulp
    .src("src/assets/scss/bundle.scss")
    .pipe(gulpif(!PRODUCTION, sourcemaps.init()))
    .pipe(sass().on("error", sass.logError))
    .pipe(autoprefixer())
    .pipe(gulpif(PRODUCTION, cleanCSS()))
    .pipe(gulpif(!PRODUCTION, sourcemaps.write()))
    .pipe(gulp.dest("dist/assets/css"))
};

#画像の圧縮
npm install --save-dev gulp-imagemin@^7.1.0

import imagemin from "gulp-imagemin";
export const image = () => {
  return gulp
    .src("src/assets/images/**/*.{jpg,jpeg,png,svg,gif}")
    .pipe(gulpif(PRODUCTION, imagemin()))
    .pipe(gulp.dest("dist/assets/images"));
};

npm install --save-dev webpack-stream
# ローダー
npm install --save-dev babel-loader
#エントリーポイントが2つ以上の場合のファイル名のため
npm install --save-dev vinyl-named

export const script = () => {
  return gulp
    .src(["src/assets/js/bundle.js"])
    .pipe(named())
    .pipe(
      webpack({
        module: {
          rules: [
            {
              test: /\.js$/,
              use: {
                loader: "babel-loader",
                options: {
                  presets: ["@babel/preset-env"],
                },
              },
            },
          ],
        },
        output: {
          filename: "[name].js",
        },
        devtool: !PRODUCTION ? "inline-source-map" : false,
        mode: PRODUCTION ? "production" : "development",
      })
    )
    .pipe(gulp.dest("dist/assets/js"));
};

npm install --save-dev browser-sync

import browserSync from "browser-sync";
const server = browserSync.create();

export const style = () => {
  return gulp
    //省略
    .pipe(gulp.dest("dist/assets/css"))
   //追加
    .pipe(server.stream());
};

export const serve = (done) => {
  server.init({
    baseDir: "./", //index.htmlをrootにおいている場合
  });
//ローカルサーバーの例
//   server.init({
//     proxy: "http://localhost/wordpress/",
//   });
  done();
};
export const reload = (done) => {
  server.reload();
  done();
};

export const watch = () => {
  gulp.watch("src/assets/scss/**/*.scss", style);
  gulp.watch("src/assets/js/**/*.js", gulp.series(script, reload));
  gulp.watch("src/assets/images/**/*.{jpg,jpeg,png,svg,gif}", gulp.series(image, reload));
//  gulp.watch("**/*.php", reload);
  gulp.watch("**/*.html", reload);
};

#グロブを使用してファイルとディレクトリを削除する
npm install --save-dev del@^6.1.1

import del from "del";
export const clean = () => del(["dist"]);

export const dev = gulp.series(clean, gulp.parallel(style, script, image), serve, watch);
export const build = gulp.series(clean, gulp.parallel(style, script, image));

npm install --save-dev gulp-zip

import zip from "gulp-zip";
import info from "./package.json";
export const compress = () => {
  return gulp
    .src([
      "**/*",
      "!.vscode",
      "!node_modules{,/**}",
      "!packaged{,/**}",
      "!src{,/**}",
      "!.babelrc",
      "!.gitignore",
      "!gulpfile.babel.js",
      "!package.json",
      "!package-lock.json",
    ])
    .pipe(zip(`${info.name}.zip`))
    .pipe(gulp.dest("packaged"));
};

export const bundle = gulp.series(build, compress);

  "scripts": {
    "start": "gulp dev",
    "build": "gulp build --prod",
    "bundle": "gulp bundle --prod"
  },
省略
browserslisを追加
"browserslist": [
   "> 0.2%, not dead",
   "not IE 11"
 ]