GulpでSassのコンパイル(Autoprefixer,server,watch)

はじめに

タスクランナーのgulpを初めて導入してsassの自動コンパイル、ベンダープレフィクスの付与、サーバ起動、自動リロードプロジェクトを作ってみた

★プロジェクトはこちら
GitHub リポジトリ(GulpSassCompiler)

参考

以下のサイトを参考に本プロジェクトを作成。

• 参考サイト１
• 参考サイト2
• 参考サイト3
• 参考サイト4
• 参考サイト5
• 参考サイト6
• 参考サイト7

require

node.js
gulp

備忘録

必要なプラグインのインストール

コマンドライン.cmd

npm init
npm install gulp --save-dev
npm install gulp-sass --save-dev
npm install browser-sync --save-dev
npm install gulp-plumber --save-dev
npm install --save-dev gulp-autoprefixer

Gulpfile.js

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

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

gulp.task("sass",function(db){//タスクの登録("sass"タスクを登録する)
  gulp.src("sass/**/*.scss")//gulp.src()...読み込むファイルを設定する
  .pipe(plumber())
  .pipe(sass({outputStyle:'expanded'}))//pipe()...srcで取得したファイルに行う処理を記載する。
                                      //sass()...コンパイルの実行をする。outputStyleで吐き出すcssのスタイルを設定する。
  .pipe(autoprefixer({
    cascade:false
  }))
  .pipe(gulp.dest("./css"))//gulp.dest()...出力したい場所を記載する。
  db();
});

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

gulp.task("watch",function(db){
  gulp.watch("sass/**/*.scss",gulp.parallel(["sass","reload"]));
  gulp.watch("./**/*.html",gulp.series(["reload"]));
  //watch(['監視するファイル'],['実行したいタスク名'])
  //タスク名をdefaultにするとコマンドにタスク名を入れる必要がなくなり便利です。
  db();
});

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

package.jsonの修正

package.json

{
  "name": "gulptest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "browser-sync": "^2.26.7",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-plumber": "^1.2.1",
    "gulp-sass": "^4.1.0"
  },
  //★ここにautoprefixerの設定を追加
  "browserslist": [
    "last 2 version",
    "> 5%",
    "ie >= 9"
  ]
}