【WEBコーディング】windows 静的HTMLサイト制作でローカルに設定するGulpのインストール一覧(自分用)

#【WEBコーディング】静的HTMLサイト制作でローカルに設定するGulpのインストール一覧

以下のインストール済みを確認

node --version
npm --version
gulp --version

ローカルにgulpをインストール

npm install --save-dev gulp
gulp -v　// CLIとLocalのバージョンが表示されればOK

必要なパッケージをインストール

npm install --save-dev browser-sync
npm install gulp-clean-css --save-dev
npm install gulp-rename --save-dev
npm install gulp-uglify --save-dev
npm install gulp-imagemin --save-dev
npm install imagemin-pngquant --save-dev
npm install imagemin-mozjpeg --save-dev
npm install gulp-sass --save-dev

インストールしたパッケージを使ったgulpfile.js
browser-syncがうまくいかなかったので、修正

gulpfile.js

var gulp = require("gulp");

try { fsevents = require('fsevents'); } catch (error) {}

const { src, dest, watch, parallel } = require("gulp"),
 browsersync = require('browser-sync').create();

const taskServer = (done) => {
 browsersync.init({
  server: {
   baseDir: './',
   index: 'index.html'
  },
  port: 2000
 })
 done();
};

const taskReload = (done) => {
 browsersync.reload();
 done();
};

// Wacth
const taskWatch = (done) => {
 watch('./**/*', taskReload);
 done();
}

exports.default = parallel(taskServer, taskWatch);

var uglify = require('gulp-uglify');
var rename = require("gulp-rename");

gulp.task('minjs', function() {
  return gulp.src("js/*.js")
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('js/'));
});

var imagemin = require("gulp-imagemin");
var imageminPngquant = require("imagemin-pngquant");
var imageminMozjpeg = require("imagemin-mozjpeg");

var imageminOption = [
  imageminPngquant({ quality: [0.65, 0.8] }),
  imageminMozjpeg({ quality: 85 }),
  imagemin.gifsicle({
    interlaced: false,
    optimizationLevel: 1,
    colors: 256
  }),
  imagemin.mozjpeg(),
  imagemin.optipng(),
  imagemin.svgo()
];

gulp.task( 'imagemin', function() {
  return gulp
    .src( './img/base/*.{png,jpg,gif,svg}' )
    .pipe( imagemin( imageminOption ) )
    .pipe( gulp.dest( './img' ) );
});

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

var cleanCSS = require('gulp-clean-css');
var rename   = require("gulp-rename");

gulp.task('sass', function() {
  // return gulp.src('./scss/**/*.scss')
  return gulp.src('./scss/style.scss')
    // .pipe(sass({outputStyle: 'expanded'}))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('./css'));
});

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

gulp.task( 'watch', function() {
  gulp.watch( './scss/**/*.scss', gulp.task( 'sass' ) );
});

2つのコマンドプロンプトで以下を実行して、ブラウザリロードとsassを自動コンパイルさせる

ブラウザリロード

cd "gulpfile.jsのあるディレクトリ"
gulp

sassコンパイル

cd "gulpfile.jsのあるディレクトリ"
gulp watch

参考

https://haniwaman.com/gulp-windows/
https://mimirswell.ggnet.co.jp/blog-221
https://haniwaman.com/gulp/