• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

gulpでSassをビルドする

2018-03-18 by mocurot コメントを書く

gulp(ガルプ)はNode.jsをベースとしたタスクランナーである。gulpを使えばさまざまな作業を自動化することができる。gulpの一番の特徴はファイルの処理をストリーミングできるところ。
現在、Sassのビルドにgulpを使うのが主流であると言っても良い。

gulp

nodebrewのインストール

RubyやPythonのようにプロジェクトやお試しで、Node.jsのバージョンを切り替えることがあるのでNode.jsのバージョン管理(切り替え)ができるnodebrewを導入する。
※macOS 用パッケージマネージャー「Homebrew」がインストールされている前提。

$ brew install nodebrew

#nodebrewセットアップ
$ nodebrew setup

#環境変数の反映
$ source .bash_profile

#安定版のインストール
$ nodebrew install-binary stable

#インストール後の確認
$ nodebrew list

#使用するnode設定
$ nodebrew use stable

#npmの更新
$ npm update -global npm

Gulpのインストール

Node.jsではnpmによってパッケージのインストールを行う。gulpもnpmでインストールすることになる。

npmでパッケージをインストールする際にGlobal、Localのどちらにインストールするかを選ぶ。Globalにインストールしたパッケージはインストールしたマシンのどこからでもそのパッケージを使用することができる。
Localにインストールしたパッケージはインストールしたディレクトリ以下からのみ使用できる。


グローバルインストール

gulpはGlobal、Localの両方にインストールして使用する。ローカルインストールしたGulpを実行するためにはグローバルの Gulpが必要らしい。

$ npm install gulp-cli -global

続いてnpmの設定を保存するpackage.jsonを生成しておこう。

$ npm init -y

package.jsonがあれば複数人で開発する際に登録された(後述)パッケージが自動でインストールされるので便利だ。


ローカルインストール

次にgulpパッケージのローカルインストールしよう。
 –save-dev オプションを付けてインストールするとpackage.jsonに開発用のパッケージとしてインストール情報を保存するオプションで、package.json内のdependenciesという項目にgulpの情報が追加される。

$ npm install gulp --save-dev

これでタスクランナーgulpの準備は整った。

Sassをビルドするための設定

まずはgulpでSassをビルドするためのパッケージgulp-sassパッケージをローカルインストール。

$ npm install gulp-sass --save-dev

gulpfile.jsをルートディレクトリに設置する。gulpfile.jsはgulpに実行させるタスクを管理するファイルだ。

//パッケージ変数にする。
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function(){  //Gulp実行時のタスク
  gulp.src('./sass/**/*.scss') //対象のディレクトリ
  .pipe(sass({outputStyle: 'expanded'}))  //ビルドスタイルの指定
  .pipe(gulp.dest('./css'));  //ビルド先の指定
});

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']); //第一引数に監視したいファイルのパス、第二引数に実行したいタスク名
})

gulp.task('default',['watch']); //watchをデフォルトタスクに指定

ビルドスタイルの指定

gulpfile.jsの7行目で指定できるビルドスタイルは以下の通り。

  • nested → Sassファイルのネストを引き継いで出力
  • expanded → {} で改行して出力
  • compact → セレクタと属性を1行にまとめて出力
  • compressed → すべてを1行にまとめて出力

Sassをビルドする

gulpfile.jsのデフォルトタスクに「watch」を指定したのでターミナルからgulpを実行するだけで.scssファイルの監視が始まる。

$ gulp

実行後、対象ファイルの変更を監視して、保存の度に.scssファイルをビルドしてくれる。

ベンダープレフィックスを自動でつける

対象となるブラウザ毎にベンダープレフィックスを書き分けるなんてことはgulpに任せてしまおう。
書き出したcssにgulp-autoprefixerを使って、自動でベンダープレフィックスを付与。
gulp-autoprefixerパッケージをローカルインストール。

$ npm install gulp-autoprefixer --save-dev

gulpfile.js**を編集する

var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],  //最後の2バージョンのブラウザを対象
    cascade: false
  }))
  .pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']);
})

gulp.task('default',['watch']);

Autoprefixerの対象ブラウザについてはこちらの記事が非常に参考になる。
Autoprefixerの対象ブラウザって、どうやって選べばいいの?

ソースマップを作成する

ブラウザのデベロッパーツールでデバッグする時にとても便利なソースマップ。
sassファイルとCSSファイルをマッピングして、コンパイル前のどの部分が該当するか分かるようになる。
gulp-sourcemapsパッケージをローカルインストール。

$ npm install gulp-sourcemaps --save-dev

gulpfile.js**を編集する

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())  //呼び出し・初期化
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 2 versions'],
    cascade: false
  }))
  .pipe(sourcemaps.write('./maps')) //ソースマップの書き出し先を指定
  .pipe(gulp.dest('./css'));
});

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']);
})

gulp.task('default',['watch']);

cssを圧縮する

さらにcssファイルの圧縮もgulpのタスクに組み込んでしまおう。
gulp-cssminパッケージをローカルインストール。

$ npm install gulp-cssmin --save-dev

gulpfile.js**を編集する

var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
var cssmin = require('gulp-cssmin');

gulp.task('sass', function () {
  gulp.src('./sass/**/*.scss')
  .pipe(sourcemaps.init())
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(autoprefixer({
    browsers: ['last 4 versions'],
    cascade: false
  }))
  .pipe(sourcemaps.write('./maps'))
  .pipe(cssmin())
  .pipe(gulp.dest('./css'))
});

gulp.task('watch', function(){
  gulp.watch('./sass/**/*.scss', ['sass']);
})

gulp.task('default',['watch']);

関連

Filed Under: Sass 関連タグ:GULP, NODE.JS, SASS

Reader Interactions

コメントを残す コメントをキャンセル

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

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
    MacでVPN接続してもグローバルIPが変わらない時に見なおす設定
  • input,textareaのCSSをリセット -iOS Safari -
    input,textareaのCSSをリセット -iOS Safari -
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • Sassの初期設定〜コンパイル
    Sassの初期設定〜コンパイル
  • CatalinaでEmacsのファイルアクセスを許可する方法
    CatalinaでEmacsのファイルアクセスを許可する方法
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方
    ダークソウル リマスター版 公爵の書庫 アヴェリンの取り方

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン