Webstormにgulpでsass自動コンパイル設定

Webstormにgulpでsass自動コンパイル設定

グローバルにgulpをインストール

1. node.jsインストール

インストールされているか確認

node -v

無ければインストール.
インストール方法は調べてください

2. gulpをインストール

インストールされているか確認

gulp -v

無ければグローバルにインストール

sudo npm install gulp -g

プロジェクトでのgulp設定

1. package.jsonを作成

webstormでプロジェクトを開いてwebstormのターミナルで(またはcdでプロジェクトディレクトリに移動し)

npm init

enterキーでデフォルト値をどんどん入れてenterでyes

2. プロジェクトにgulpをインストール

npm i -D gulp

必要なパッケージをインストール

プロジェクトディレクトリで以下のコマンド

npm i -D gulp-autoprefixer

そうするとpackage.jsonに下記のように追加される

package.json

"devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
  }

合わせて、以下も同様にインストールする。
– gulp-clean-css
– gulp-sass
– gulp-sourcemaps

gulpfile.jsの設定

package.jsonと同じ階層にgulpfile.jsを作成、以下をコピペ。
src、出力先は適宜変更してください。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');
var sass = require('gulp-sass');
var sourcemap = require('gulp-sourcemaps');
var cleancss = require('gulp-clean-css');

gulp.task('compile-sass', function () {
    return gulp.src('./scss/*.scss')
        .pipe(sourcemap.init())
        .pipe(sass({outputStyle: 'expanded'}))
        .pipe(autoprefixer({
            // ☆IEは9以上、Androidは4以上、iOS Safariは8以上
            // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定
            browsers: ["last 2 versions", "ie >= 9", "Android >= 4", "ios_saf >= 8"],
            cascade: false
        }))
        // .pipe(cleancss())
        .pipe(sourcemap.write('.', {includeContent: false}))
        .pipe(gulp.dest('./css'));
});

gulp.task('msg', ['compile-sass'], function () {
    console.log('compile done!');
});

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

gulp実行

プロジェクトディレクトリで

gulp

出力先にコンパイルされていればOK

参考:
phpstormのFilewatcherでautoprefixerを使う方法
CSSベンダープレフィックス-webkit-を今この瞬間に辞める為のAutoprefixerの導入とお薦め設定

しかしながら、gulpはもう使用しないトレンドになっていくらしい。
参考:
今時のフロントエンド開発2017 (1. 愚痴編)

コメントを残す

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