Gulp4(sass,watch,webp,css-minify)

Gulp4でsass、watch、webp(imgの軽量化)、minify(cssの軽量化)の方法のメモです。

まずはインストールから。

必要なプラグインをダウンロード

ダウンロードするのは以下の4つ

どれも開発環境で使うものなので、ターミナルで以下のコマンドを実行します。

npm install プラグイン名 --save dev

または

npm install プラグイン名　-D

シェルファイルを作って一気にインストールすると簡単です。

必要なプラグインを書いたシェルファイル

下記をそのままコピーしてtest.shで保存してください。

#!/bin/sh

npm install gulp -D
npm install gulp-clean-css -D
npm install gulp-sass -D
npm install gulp-webp -D

そして、ターミナルで以下の通り実行すれば、必要なプラグインのダウンロードが完了します。

sh test.sh

gulpfile.jsを作成

const { src, dest, watch } = require('gulp');
const webp = require('gulp-webp');
const sass = require('gulp-sass')(require('sass'));
const rename = require("gulp-rename");
const minifycss = require('gulp-clean-css');

const imgmin = () =>
	src('src/img/*.{jpg,jpeg,png}')
	.pipe(webp())
	.pipe(dest('dist'));
	
exports.imgmin = imgmin;

const style = () =>
		src('src/sass/*.scss')
		.pipe(sass())
		.pipe(dest('src/css'));		

const watchsass = () => watch("src/sass/*.scss",　style);

exports.watch = watchsass;

const cssmin = () =>
	 src("src/css/*.css")
	 .pipe(minifycss())
	 .pipe(rename({
		 extname: '.min.css'
	 }))
	 .pipe(dest('src/css/'));

exports.cssmin = cssmin;

gulpを実行

画像の圧縮

gulp imgmin

sass

gulp watch

cssの圧縮と名前変更

gulp cssmin

以上になります。

最後までお読み頂きありがとうございました。