Pocket

前回は、gulpの導入から、sass(scss)をコンパイルしてcssを作成するタスクを作成するところまで行いましたので、今回は、cssの圧縮とベンダープレフィックス付けのタスクを作成したいと思います。


今回作成したタスクでできることは、

  1. ・scssのコンパイル
  2. ・cssの圧縮とベンダープレフィックス付け

になります。

※Mac環境を前提とします。またnode.js、rubyはインストールしてあるものとして進めます。



gulpによるcssの圧縮とベンダープレフィックス付け

cssの圧縮には、gulp-cssminと、作成したcssファイルを「○○.min.css」というように名前を変更したいので、gulp-renameというプラグインを使います。

ターミナルを起動し、プロジェクト(gulpfile.jsがあるところ)まで移動したら、

npm install gulp-cssmin gulp-rename –save-dev

とたたいて、それぞれローカルにインストールします。


インストールができたら、gulpfile.jsにcssminとrenameのタスクを組み込みます。


はじめに、cssminとrenameのプラグインをrequireで読み込んだら、sassのときと同じようにタスクを作成します。
今回は’cssmin’という名前のタスクにし、その中でcssminをしてminify化した後、renameで「◯◯.min.css」という名前にリネームしています。

これでターミナルから

gulp cssmin

をたたくと、cssmin/に「style.min.css」が作成されます。


続いてベンダープレフィックス付けは、gulp-autoprefixerを使います。

npm install gulp-autoprefixer –save-dev

でインストールを行ったら、タスクを作成します。

‘sass’のタスクの中に、autoprefixer()を追加しています。
これでsassのタスクを動かすと、autoprefixerが行われて自動でベンダープレフィックスが付くようになります。




まとめ

今回はcssの圧縮とベンダープレフィックス付けを行うタスクを作成しました。
次回は、jsファイルを圧縮するタスクを作成したいと思います。


以上になります。



Pocket

Comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

Copyright © team naporitan All Rights Reserved.