今回はgulpの二つのプラグインを追加します。
・gulp-autoprefixer
・gulp-imagemin
まず、gulp-autoprefixer に関しては、以前の記事で記述が足りなったので追記し動くようにしました。
また、gulp-imageminは画像を簡単に圧縮できるので、webサイトに画像をアップするときに重宝するのでおススメです。
それでは早速、二つのプラグインを導入していきましょう。
※すでにgulp環境を構築している場合は⑤から読んでください。
①『node.js(ノード．ジェイエス)』をダウンロードし、インストール
https://nodejs.org/ja/より、推奨verをダウンロードしインストール
node.jsとはphpなどのようにサーバー上で動くjavascript環境です。(通常javascriptはブラウザ上で動きます)
※node.jsをインストールするとnpmも同時インストールされます
②『gulp』をグローバルインストール(コマンドプロンプト)
コマンドプロンプトを起動し、次の記述を打ち込みエンターキー
npm i --global gulp-cli
※グローバルインストールとローカルインストールを混同しないように注意
※コマンドプロンプトでgulpと打つだけでタスクを実行できるようにインストール
③『package.json』を作成(コマンドプロンプト)
cd+(半角スペース)を記述し、コマンドプロンプト上にプロジェクトファイルをドラッグアンドドロップし、エンターキー
cd プロジェクタファイル
コマンドプロンプトの指定フォルダが移動したら、次の記述を打ち込みエンター
npm init -y
※プロジェクトファイルの中にpackage.jsonファイルが作成されます。
※package.jsonにはインストールしたパッケージ情報が記載されます。
④『gulp』をローカルインストール(コマンドプロンプト)
次の記述を打ち込みエンターキー
npm i -d gulp
※プロジェクトファイル内でgulpを使用するためにローカルにインストールしています
※ローカルインストールしたファイルはnode_modulesフォルダに保管されます
※package-lock.jsonファルダが生成されますが、そのまま放置で問題ありません(私も勉強中で上手く説明できません。気になる方はググってみてね)
⑤『gulpfile.js』を作成
プロジェクトフォルダにgulpfile.jsを作成(下のコード中身)
//plug-inインストールしたプラグインを定義
var gulp = require('gulp');
var plumber = require('gulp-plumber');
var autoprefixer = require('gulp-autoprefixer');//追加するプラグイン
var sass = require("gulp-sass");
var pug = require('gulp-pug');
var imagemin = require('gulp-imagemin');//追加するプラグイン
//sassの仕事
gulp.task("sass", function() {
gulp.src("sass/**/*.scss")
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: ['> 1%','last 2 versions','Android >= 4','ios_saf >= 8'],
cascade: false
}))
.pipe(gulp.dest("www/css"));
});
//pugの仕事
gulp.task("pug", function() {
gulp.src("pug/**/*.pug")
.pipe(plumber())
.pipe(pug())
.pipe(gulp.dest("www"));
});
//imagemin
gulp.task('imagemin',function(){
gulp.src(['images/**/*'])
.pipe(imagemin())
.pipe(gulp.dest('www/images'));
});
//watchの仕事
gulp.task('watch', function(){
gulp.watch('sass/**/*.scss', ['sass']);
gulp.watch('pug/**/*.pug', ['pug']);
gulp.watch('images/**/*', ['imagemin']);
});
//task実行
gulp.task('default', ['sass', 'pug', 'imagemin', 'watch']);
※コンピュータにやらせる仕事を記述しています
・sassの仕事
sassフォルダにある全ての.scssファイルを対象に、コンパイルをして、wwwファルダ中のcssフォルダに保存してねって命令
⇩
autoprefixer({
browsers: [‘> 1%’,’last 2 versions’,’Android >= 4′,’ios_saf >= 8′],
cascade: false
})
ベンダープレフィックスの記述をするブラウザの設定を{ }の中に記述。(前回はブラウザの設定を記述していなかった)
cascadeは自動で整形するかどうか。falseにすることでコード確認することができる。
⇩追加
———————————————————————————
autoprefixer({
cascade: false
})
・gulpでautoprefixernにエラーが出る場合は、gulpfile.jsよりブラウザの指定を削除し、
package.jsonのファイルに記述を書くようにしてください。
“browserslist”: [
“> 1%”,
“last 2 versions”,
“Android >= 4”,
“ios_saf >= 8”
]
を記述すれば、解決するかもです。
———————————————————————————
・imageminの仕事
imagesフォルダ内のものを対象に、imageminを実行し、www/imagesフォルダに保存してねって命令
・watchの仕事
sassフォルダにある全ての.scssファイルを対象に監視を行って、変更があったら「sassの仕事」をしてねって命令
pugフォルダにある全ての.pugファイルを対象に監視を行って、変更があったら「pugの仕事」をしてねって命令
imagesフォルダを監視して、変更があったら「imageminの仕事」をしてねって命令
・taskの実行
コマンドプロンプトでgulpって書いてエンター押したら、sass、pug、imagemin、watchを開始してね命令
※プロジェクトファイルの構成内容
(テキストエディタ上に書いてるけど、説明し易いからここに書いてるだけなので、下を参考に各自フォルダを作ってみてね)
プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ images
|___ node_modules
|___ pug
| |___ index.pug
|___ sass
| |___ test.scss
|___ www
|___ css
⑥パッケージをローカルにインストール(コマンドプロンプト)
gulpfile.jsに記載したプラグイン(便利機能)をローカルインストールします。
・gulp-plumber(エラーがあってもgulpを停止させない)をローカルにインストール
npm i -d gulp-plumber
・gulp-autoprefixer(ベンダープレフィックスと呼ばれるめんどくさい記述を自動化)をローカルにインストール
npm i -d gulp-autoprefixer
・gulp-sass(sassをcssに変換)をローカルにインストール
npm i -d gulp-sass
・gulp-pug(pugをhtmlに変換)をローカルにインストール
npm i -d gulp-pug
・gulp-imagemin(画像圧縮)をローカルにインストール
npm i -d gulp-imagemin
※この他にも便利なプラグインがたくさん用意されています。
⑦task実行(コマンドプロンプト)
gulpを記述し、エンターでgulpfile.jsに記述した内容が実行される
gulp
・gulp起動後はテキストエディタ上で ctrlキー + Bキー でgulpを起動更新できます。
・gulpを停止させるときはコマンドプロンプトを消してOKです
※gulp起動後のプロジェクトファイルの構成
プロジェクトファイル
|___ package.json
|___ package-lock.json
|___ gulpfile.js
|___ node_modules
|___ images
|___ pug
| |___ index.pug
| |___ index.html
|___ sass
| |___ test.scss
|___ www
|___ css
| |___ test.css
|___ index.html
|___ images
今回は以上です。