用途
新着
履歴
分類

SCSS 開発の準備

SCSS 開発の準備
SCSS 開発の準備
SCSSの開発としてgulpを使用したサンプルです。

CSSを効率的に記述する手法としてSCSSがあります。

エディタで保存するたびにCSSを生成し、開発を円滑に行います。

まずnode.jsをインストールします。

https://nodejs.org/ja/

ターミナルで以下のコマンドをうって、バージョンが出たら成功です。

node -v

npm(node Package Manager)も一緒にダウンロードされているのでそれもチェック。

npm -v

プロジェクトのルートに移動する。

package.jsonを作成する。

{
  "name": "my-template",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "keywords": [],
  "author": "",
  "devDependencies": {
    "autoprefixer": "^9.8.6",
    "css-mqpacker": "^7.0.0",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-changed": "^4.0.2",
    "gulp-clean-css": "^4.3.0",
    "gulp-imagemin": "^7.1.0",
    "gulp-merge-media-queries": "^0.2.1",
    "gulp-notify": "^3.2.0",
    "gulp-plumber": "^1.2.1",
    "gulp-postcss": "^8.0.0",
    "gulp-sass": "^4.1.0",
    "gulp-sass-glob": "^1.1.0",
    "gulp-sourcemaps": "^2.6.5",
    "imagemin-mozjpeg": "^9.0.0",
    "imagemin-pngquant": "^9.0.0"
  },
  "browserslist": [
    "last 2 version",
    "ie >= 11",
    "Android >= 4"
  ]
}

SCSS以外のパッケージも含まれますがとりあえず。

npm install

いろんなパッケージがインストールされる。

次にgulpfile.jsを作成する。

scss以外の機能も書いてありますが、とりあえず。

// package
const del = require('del');
const gulp = require('gulp');
const sass = require('gulp-sass');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');
const sourcemaps = require('gulp-sourcemaps');
const changed = require('gulp-changed');
const postcss = require('gulp-postcss');
const cleanCSS = require('gulp-clean-css');
const autoprefixer = require('autoprefixer');
const mqpacker = require('css-mqpacker');
const imagemin = require('gulp-imagemin');
const mozjpeg = require('imagemin-mozjpeg');
const pngquant = require('imagemin-pngquant');
const sassglob = require('gulp-sass-glob');
const mmq = require('gulp-merge-media-queries');


// origin path
const originPath = '';

// path
const cssDir = originPath + 'css';
const scssDir = originPath + 'scss';
const imgDir = originPath + '_img';
const compImgDir = originPath + 'img';
const cssFile = originPath + 'css/**/*.css';
const scssFile = originPath + 'scss/**/*.scss';

// styleCompile
const styleCompile = () => {
  return gulp
    .src(scssFile)
    .pipe(sourcemaps.init())
    .pipe(changed(cssDir))
    .pipe(
      plumber({
        errorHandler: notify.onError('<%= error.message %>'),
      }),
    )
    .pipe(sassglob())
    .pipe(
      sass({
        outputStyle: 'expanded',
      }),
    )
    .pipe(sourcemaps.write())
    .pipe(
      postcss([
        autoprefixer({
          cascade: false,
        })
      ])
    )
    .pipe(gulp.dest(cssDir));
}

// styleOrganize
const styleOrganize = () => {
  return gulp
    .src(cssFile)
    .pipe(
      postcss([
        mqpacker()
      ])
    )
    .pipe(mmq({ log: false }))
    .pipe(cleanCSS())
    .pipe(gulp.dest(cssDir));
}

// syncDel
const syncDel = (path, file) => {
  if (file === 'scss') {
    del([
      path.replace(scssDir + '/', cssDir + '/').replace('.scss', '.css')
    ]);
  } else if (file === 'img') {
    del([
      path.replace(imgDir + '/', compImgDir + '/')
    ]);
  }
}


// imageCompress
const imageCompress = () => {
  return gulp
    .src(imgDir + '/**/*.{jpg,jpeg,png,gif,svg}')
    .pipe(changed(compImgDir))
    .pipe(
      imagemin([
        pngquant({
          quality: [0.65, 0.8],
          speed: 1
        }),
        mozjpeg({
          quality: 80
        }),
        imagemin.gifsicle({
          interlaced: false
        }),
        imagemin.svgo({
          plugins: [
            { removeViewBox: true },
            { cleanupIDs: false }
          ]
        }),
      ])
    )
    .pipe(gulp.dest(compImgDir));
}

// taskWatch
const taskWatch = (cb) => {
  gulp.watch(scssFile, styleCompile);
  gulp.watch(scssFile).on('unlink', (path) => syncDel(path, 'scss'));
  cb();
}

// exports
exports.default = gulp.series(styleCompile, taskWatch);
exports.css = styleOrganize;

以下のように編集するファイルを作成します。

index.html

<link rel="stylesheet" href="./css/main.css">

<div id="myId"><a href>test</a></div>

scss/main.scss

#myId {
    margin: 5px;
      a {
        color: #F0F;
        &:hover { color: #0FF; }
      }
  }

以下のようなファイル構成になります。

以下のコマンドでgulpを起動します。

npx gulp

gulpがファイルを検知し、保存時にSCSSの処理が走ります。

公開 2021-06-18 00:12:05
更新 2021-06-24 22:47:05
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2021 kipure
Top