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;
