Gulp導入メモ

2020年7月2日 13:32

自分が使用するためにメモ的な感じで書いていきます。
(基本的にコピペだけでできるように…)
内容はsassの自動化、プリフィックスの付与、サーバー起動＆リロード、画像圧縮です。

1.Node.jsをインストール

公式サイトから推奨版をインストールする。(最新版でも良い)

node -v

上記のコマンドをコマンドプロンプトで入力し、インストールできてるか確認を行う。

2.ファイルの作成

デスクトップに制作するプロジェクト名のファイルを作成する。
仮にgulp-testで作成し、そのファイルをvs codeで開く。
そして、ターミナル > 新しいターミナルをクリックする。

npm init -y

上記のコマンドを入力して、package.jsonを作成させます。

3.使用するモジュールをインストール

メインのモジュール
・gulp→本体
・gulp-sass→Sassをコンパイルする
・gulp-plumber→エラー起きた際に起きる強制停止を防止する
・gulp-postcss→JavaScriptのプラグインを使って、CSSを拡張/変換することができる。（今回はautoprefixerを使うため）
・autoprefixer→ベンダープリフィックスを自動で付与する
・browser-sync→自動でブラウザをリロードしてくれる

npm i -D gulp gulp-sass gulp-plumber gulp-postcss autoprefixer browser-sync

画像圧縮用のモジュール
・gulp-imagemin→SVGとGIFを圧縮する
・imagemin-pngquant→PNGを圧縮する
・imagemin-mozjpeg→JPGを圧縮する
・gulp-changed→変更されたファイルを確認する（変更された画像のみ圧縮するためにいれる）

npm i -D gulp-imagemin imagemin-pngquant imagemin-mozjpeg gulp-changed

4.gulpfile.jsの作成

作成したファイル（gulp-test）の中にgulpfile.jsを作成する。
まとめて書く方が良いが、機能で別けている
まず、コンパイルとブラウザリロード用を読み込ませる

var gulp = require("gulp");
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var browser = require("browser-sync");

次にSassをコンパイルさせる文
autoprefixerの対応ブラウザの指定がpackage.jsonに書くようになっているので※autoprefixerのブラウザ指定を見る

gulp.task("sass", function (callback) {
 return gulp.src("src/style.scss") //参照するファイル
   .pipe(plumber())　
   .pipe(sass({
     outputStyle: 'expanded' //一番馴染みのある CSSの形式に変換
   }))
   .pipe(postcss([
     autoprefixer({
       cascade: false //変に整形されないようにする
     })
   ]))
   .pipe(gulp.dest("dist")); //変換後に出力する場所
 return callback();
});

次にブラウザを立ち上げてリロードする文

gulp.task("server", function (callback) {
 browser({
   server: {
     baseDir: "dist/" //参照するindex.html
   }
 });
 return callback();
});
gulp.task("reload", function (callback) {
 browser.reload();
 return callback();
})

次にwatchで変化があれば更新する文

gulp.task('watch', function (callback) {
 gulp.watch("src/style.scss", gulp.parallel(["sass", "reload"]));
 gulp.watch("dist/index.html", gulp.series(["reload"]));
 return callback();
});

最後にデフォルトでサーバーを立ち上げて変化があれば更新する文

gulp.task('default', gulp.series(gulp.parallel(['sass', 'watch', 'server'])));

そして次の文で起動

npx gulp

基本的、上の文があれば基本的なことはできる
次に画像を圧縮するためのモジュールを読み込ませる（ここにgulp本体だけ読み込んで画像圧縮用で作成するのも良い）

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var mozjpeg = require('imagemin-mozjpeg');
var changed = require('gulp-changed');

圧縮する全文

gulp.task('img', function() {
 return gulp.src('./src/img' + '/**/*.{png,jpg,gif}')
   .pipe(changed('./dist/img')) 
   .pipe(imagemin([
     pngquant({
       quality: [.7, .85],
     }),
     mozjpeg({
       quality: 85, 
       progressive: true 
     }),
     imagemin.svgo(),
     imagemin.optipng(),
     imagemin.gifsicle()
   ]))
   .pipe(gulp.dest('./dist/img')) 
});

そして次の文で圧縮できる

npx img

それぞれtaskと書き出し先は自由に指定すること
一応全文↓

var gulp = require("gulp");
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var browser = require("browser-sync");

gulp.task("sass", function (callback) {
 return gulp.src("src/style.scss")
   .pipe(plumber())
   .pipe(sass({
     outputStyle: 'expanded'
   }))
   .pipe(postcss([
     autoprefixer({
       cascade: false
     })
   ]))
   .pipe(gulp.dest("dist"));
 return callback();
});

gulp.task("server", function (callback) {
 browser({
   server: {
     baseDir: "dist/"
   }
 });
 return callback();
});

gulp.task("reload", function (callback) {
 browser.reload();
 return callback();
})

gulp.task('watch', function (callback) {
 gulp.watch("src/style.scss", gulp.parallel(["sass", "reload"]));
 gulp.watch("dist/index.html", gulp.series(["reload"]));
 return callback();
});

gulp.task('default', gulp.series(gulp.parallel(['sass', 'watch', 'server'])));

var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
var mozjpeg = require('imagemin-mozjpeg');
var changed = require('gulp-changed');

gulp.task('img', function() {
 return gulp.src('./src/img' + '/**/*.{png,jpg,gif}')
   .pipe(changed('./dist/img')) 
   .pipe(imagemin([
     pngquant({
       quality: [.7, .85],
     }),
     mozjpeg({
       quality: 85, 
       progressive: true 
     }),
     imagemin.svgo(),
     imagemin.optipng(),
     imagemin.gifsicle()
   ]))
   .pipe(gulp.dest('./dist/img')) 
});

以上かな

※autoprefixerのブラウザ指定

gulpfile.jsにかくとエラー？がでるのでpackage.jsonに次の文を追加

,
 "browserslist": [
   "last 2 versions",
   "ie >= 11",
   "Android >= 4"
 ]

ここに関しては必要に応じて変更していく

※sourcemapsの追加

必要になったので追加します。（12/02）

npm i -D gulp-sourcemaps

宣言の追加

var sourcemaps = require('gulp-sourcemaps');

sassの処理に挟む

gulp.task("sass", function (callback) {
 return gulp.src("src/style.scss") 
   .pipe(plumber())
   .pipe(sourcemaps.init())　//準備
   .pipe(sass({
     outputStyle: 'expanded' 
   }))
   .pipe(postcss([
     autoprefixer({
       cascade: false 
     })
   ]))
   .pipe(sourcemaps.write())　//書き出し
   .pipe(gulp.dest("dist")); 
 return callback();
});

最後に

独学なのであまり正しくはない、必要な機能は都度追加していくかもしれない。