とりあえず参考サイト

とりあえずSassのコンパイルだけなら下記のそのままでいける

ttps://ics.media/entry/3290

あれやこれややりたいなら下記がとても参考になる

今からでも遅くないGulpを使った開発環境の作り方

が、しかしgulp3系統での話なので最後の最後で監視するところでうまくいかない＋「gulp-progeny」のせいで動かないのでこれだけ削除した。

 

導入しませう

  1. とりあえずNode.jsを入れる必要がある
  2. 作業するようのフォルダを作成する
  3. ターミナルでcd(チェンジディレクトリ)を打って、上記フォルダを掘り込む
  4. npm init -yを入力でpackage.jsonを作成
  5. 作ったフォルダ（ローカル）にnpm install -D gulpでgulpをインスコ
  6. とりあえずgulpの下準備おわた

 

Sassコンパイルして画像の圧縮してブラウザの自動リロードしたい

gulpfile.js(gulpの設定ファイル)を適当に作る。

そこにvar gulp = require( ‘gulp’ );を記載

で、やりたいタスクをインスコしてここに記載していく。

 

Sass関連

1
npm install gulp-plumber gulp-sass gulp-autoprefixer gulp-sourcemaps --save-dev

内容はググろう

 

画像ファイルの圧縮関連

1
npm install gulp-imagemin imagemin-pngquant imagemin-mozjpeg gulp-changed --save-dev

内容はググろう。とりあえずだいたいの拡張子の画像を圧縮

js関連のはいらんので無視

 

ブラウザのオートリロード

1
npm install browser-sync --save-dev

–save-devにしてるので勝手にpackage.jsonに記載されやす

 

「gulpfile.js」の設定

いちばん四苦八苦したところですが。一旦これで動くってのを貼る。

// gulpプラグインの読み込み
const gulp = require(‘gulp’);
// Sassをコンパイルするプラグインの読み込み
const sass = require(‘gulp-sass’);
const autoprefixer = require( ‘gulp-autoprefixer’ );
const plumber = require( ‘gulp-plumber’ );
const sourcemaps = require( ‘gulp-sourcemaps’ );
const imagemin = require(‘gulp-imagemin’);
const mozjpeg = require(‘imagemin-mozjpeg’);
const pngquant = require(‘imagemin-pngquant’);
const changed = require(‘gulp-changed’);
const browserSync = require( ‘browser-sync’ );
// style.scssをタスクを作成する
gulp.task(‘sass’, function () {
// style.scssファイルを取得
　return gulp.src(‘./assets/css/**/*.scss’)
// Sassのコンパイルを実行
.pipe(plumber() )
.pipe(sourcemaps.init() )
.pipe(sass({
outputStyle: ‘expanded’
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(‘error’, sass.logError))
.pipe(autoprefixer( {
browsers: [‘last 2 version’, ‘iOS >= 8.1’, ‘Android >= 4.4’],
cascade: false
}))
// cssフォルダー以下に保存
.pipe(gulp.dest(‘./assets/css’));
});
gulp.task(“imagemin”, function () {
return gulp
.src(‘./assets/images/org/**’)
.pipe(changed(‘./assets/images/dist’))
.pipe(
imagemin([
pngquant({
quality: [.60, .70], // 画質
speed: 1 // スピード
}),
mozjpeg({ quality: 65 }), // 画質
imagemin.svgo(),
imagemin.optipng(),
imagemin.gifsicle({ optimizationLevel: 3 }) // 圧縮率
])
)
.pipe(gulp.dest(‘./assets/images/dist’));
});
// Browser Sync
gulp.task(‘bs’, function() {
browserSync({
server: {
baseDir: “./”,
index: “index.html”
}
});
});
// Reload Browser
gulp.task( ‘bs-reload’, function (done) {
browserSync.reload();
done();
});
// Default task
gulp.task(‘watch’, function(){
gulp.watch(“./assets/css/**/*.scss”, gulp.series(‘sass’));
gulp.watch(‘./assets/images/org/**’, gulp.task(‘imagemin’));
gulp.watch(“./**”, gulp.series(‘bs-reload’));
});
/// Gulpコマンドで動かすもの ////////////////////////////////////////////
gulp.task(‘default’, gulp.parallel(‘bs’,’watch’));
 

適宜は適宜やってください。
ちなみに

 

「/**」はそのディレクトリ全部

「/*.scss」はそのディレクトリのscss全部とかいう動き

メモ書きでした。

 

追記

PHP扱いたいときは下記をインスコして

1
npm install --save-dev gulp-connect-php

適宜gulpfile.jsを更新