2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】
2018年の終わりに改めて gulp 4系で sass (scss) をコンパイルする
2018年の終わりが目前に迫った年の暮れ、改めて gulp にて sass をコンパイルする環境を構築してみました。
仕様
- gulp 4系を用いる
- scss を css にコンパイルする
- autoprefixer でベンダープレフィックスを補完する
- minify (以下 圧縮)した
.min.css
も生成する - 圧縮していない css に sourcemaps を付与する
ディレクトリ構造
root/
├─ dist/ # コンパイルされたファイルの出力先
│ └─ css/ # cssのディレクトリ
│ ├─ main.css # 出力されるsourcemaps付きのcssファイル
│ └─ main.min.css # 出力される圧縮された本番用cssファイル
│
├─ src/ # コンパイル前のファイルの保存先
│ └─ scss/ # scssのディレクトリ
│ ├─ main.scss # コンパイル対象のscssファイル
│ └─ _module.scss # パーシャル化されたscssファイル
│
├─ gulpfile.js
├─ package.json
└─ node_modules/
gulp でコンパイルする環境を整える
gulp のインストール
まずは gulp をインストールする。
(※ yarn を使用する場合は上を、npm を使用する場合は下をターミナルから実行してください)
# yarn
yarn add gulp --dev
# npm
npm install gulp --save-dev
gulp-sass のインストール
sass をコンパイルするため、gulp-sass をインストールする。
# yarn
yarn add gulp-sass --dev
# npm
npm install gulp-sass --save-dev
gulp-autoprefixer のインストール
ベンダープレフィックスを補完するため、gulp-autoprefixer をインストールする。
※ ベンダープレフィックスとは一言で説明すると、特定のスタイルを各ブラウザに対応させるために付与する必要のある接頭辞(
-webkit-
,-moz-
,-ms-
,-o-
など)のこと
# yarn
yarn add gulp-autoprefixer --dev
# npm
npm install gulp-autoprefixer --save-dev
gulp-sourcemaps のインストール
sourcemaps の付与を行うため、gulp-sourcemaps をインストールする。
※ sourcemapsとは一言で説明すると、ブラウザでのデバッグ時にコンパイル前のソースコードを確認できるようにするためのコンパイル前後の関係を表したもの
# yarn
yarn add gulp-sourcemaps --dev
# npm
npm install gulp-sourcemaps --save-dev
gulp-clean-css のインストール
コンパイルした css を圧縮するため、gulp-clean-css をインストールする。
# yarn
yarn add gulp-clean-css --dev
# npm
npm install gulp-clean-css --save-dev
gulp-rename のインストール
圧縮した css のファイル名に.min
を追加するため、gulp-rename をインストールする。
# yarn
yarn add gulp-rename --dev
# npm
npm install gulp-rename --save-dev
gulpfile.js に処理を記述する
まずは今回作った gulpfile.js
の全貌です。
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const paths = {
'src': {
'scss': 'src/scss/**/*.scss',
},
'dist': {
'css': 'dist/css/',
}
};
gulp.task('sass', done => {
gulp.src(paths.src.scss)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dist.css))
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min',
}))
.pipe(gulp.dest(paths.dist.css));
done();
});
gulp.task('dev', () => {
gulp.watch(paths.src.scss, gulp.task('sass'));
});
必要なパッケージの定義
インストールした、必要なパッケージを以下のように定義します。
const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const cleanCSS = require('gulp-clean-css');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
scss, css ファイルのパスを指定
コンパイルの対象となるディレクトリ, コンパイル後の保存先のディレクトリを、今回のディレクトリ構造に合わせて以下のように定義します。
const paths = {
'src': {
'scss': 'src/scss/**/*.scss',
},
'dist': {
'css': 'dist/css/',
}
};
コンパイルタスクの定義
gulp.src()
にてコンパイル対象のパスを指定し、.pipe()
で処理をパイプします。
まず、sourcemaps
に対応させた状態で sass()
でコンパイルを行います。
その後、ベンダープレフィックスを autoprefixer()
にて補完し、gulp.dest()
にて出力先に保存します。
更に、cleanCSS()
で圧縮を行い、rename()
で .min
を付与した状態でも保存します。
gulp.task('sass', done => {
gulp.src(paths.src.scss)
.pipe(sourcemaps.init())
.pipe(sass({
outputStyle: 'expanded',
}).on('error', sass.logError))
.pipe(autoprefixer({
browsers: ['last 2 versions'],
}))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.dist.css))
.pipe(cleanCSS())
.pipe(rename({
suffix: '.min',
}))
.pipe(gulp.dest(paths.dist.css));
done();
});
scss ファイルを変更し保存する度にコンパイル
scss ファイルが変更し保存される度に、上記で定義したコンパイルタスクを実行します。(※ 今回はこの処理の名前をdev
としました)
gulp.task('dev', () => {
gulp.watch(paths.src.scss, gulp.task('sass'));
});
package.json の記述
まずは今回作った package.json
の全貌です。
{
"dependencies": {},
"devDependencies": {
"gulp": "^4.0.0",
"gulp-autoprefixer": "^6.0.0",
"gulp-clean-css": "^4.0.0",
"gulp-rename": "^1.4.0",
"gulp-sass": "^4.0.2",
"gulp-sourcemaps": "^2.6.4"
},
"scripts": {
"dev": "gulp dev"
}
}
devDependencies
の部分に今回使用するパッケージ一覧が記載されています。
また、scripts
の部分の "dev": "gulp dev"
でタスクの実行について定義しています。
実行方法
ここまでで記載してきた package.json
, gulpfile.js
が存在するディレクトリでにて以下をターミナルより実行してください。
# yarn
yarn run dev
# npm
npm run dev
まとめ
最後までご覧いただきありがとうございました。
以前ほど gulp を使用する機会は減ってしまったものの、慣れているせいもあってか便利なので改めてまとめてみました。
また、browser-sync
などもタスクとして連携するとより便利にコーディングを行うことができるので、いいねをしていただけましたら時間のある時に追記したいと思います(笑)
Author And Source
この問題について(2018年の終わりに改めてgulpでsass(scss)をコンパイルする【決定版】), 我々は、より多くの情報をここで見つけました https://qiita.com/7110/items/a9ea618f9b9c2687c949著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .