gulpを使ったscss環境構築

2021年4月29日

環境構築について
gulpの最新版の記述を導入
gulp-scss以前に流行ったcompassの良い機能も導入（下記）
・画像のサイズ、パスを自動化
・開発と本番でパスを変更できる

これらをまとめて簡単に実装できる内容を用意しました。

前提条件として
Visual Studio Code
node.jsインストール済み

まずは使ってみましょう。

構成
作業フォルダ
┝package.json
┝gulpfile.js
┝index.html
└scss
└main.scss

作業フォルダを作成
package.json ファイルを作成して下記をコピー＆ペースとして保存
ターミナル起動して、npm i でライブラリ含めて丸ごとインストでOK。

package.json

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "autoprefixer": "^10.2.5",
    "css-mqpacker": "^7.0.0",
    "gulp": "^4.0.2",
    "gulp-postcss": "^9.0.0",
    "gulp-sass": "^4.1.0",
    "postcss": "^8.2.8",
    "postcss-assets": "^5.0.0",
  }
}

gulp環境ファイル
gulpfile.jsを作成してコピペして保存でOK。

gulpfile.js

const { src, dest, watch } = require('gulp')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const assets = require('postcss-assets')
const mqpacker = require('css-mqpacker')
const autoprefixer = require('autoprefixer')

const options = {
  src: '',
  dist: 'css',
  img: 'img',
  baseUrl: '../',
  basePath: '',
  cssOption: 'expanded',
  folderPath: '202105_gwlp',
}

const serverPath = ` http://hoge.com/${options.folderPath}/`;
const filesrc = {
  css: `${options.src}scss/**/*.scss`,
}

const css = () => {
  return src(filesrc.css)
    .pipe(sass({
      outputStyle: options.cssOption
    }))
    .pipe(postcss([assets({ //②「sass」の後に指定
      loadPaths: ['./img/'],
      baseUrl: options.baseUrl,
    })]))
    .pipe(postcss([mqpacker()]))
    .pipe(postcss(([autoprefixer()])))
    .pipe(dest(`${options.dist}`))
}

exports.dev = () => {
  watch(filesrc.css, css);
}

exports.server = () => {
  options.cssOption = 'compressed';
  options.img = '/';
  options.basePath = './img';
  options.baseUrl = serverPath;
  watch(filesrc.css, css);
}

ここまで準備できたら
vs codeのターミナルから下記コマンドを選んで実行してください。
開発環境css出力用コマンド
npx gulp dev

サーバーアップ用css出力用コマンド
npx gulp server

実行後は、main.scssを保存する度に、cssが自動で出力されます。
自動的にcssフォルダ、main.cssが作成されます。
gulpタスクを終了する場合はctrl＋cで停止できます。
サーバー用のイメージリンクはダミーです。
実際にアップするサーバーのパスを入れてください。

今回は、scssのみですが、jsも対応できる環境設定を次の記事でアップしたいと思います。

参考にしたサイト
https://qiita.com/manabuyasuda/items/0971dbd3729cf68f87fb
https://qiita.com/miwashutaro0611/items/24f156868350503d4875
https://maku77.github.io/sass/var.html
https://book2.scss.jp/code/c5/05.html
https://github.com/borodean/postcss-assets