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;