ホーム ブログ 未分類 自動コンパイルするsassが使えるようになるまでのメモ

自動コンパイルするsassが使えるようになるまでのメモ

2018年版! Sass(とGlup)を使おう

 

CSSをSassで書き、自動コンパイルするのための環境構築が成功したのでメモ。黒い画面(コマンドライン)を叩きに叩いていきます。macOS Hight Sierra で作業しました。

以下に実行コマンドを掲載していきますが、$はターミナルに打ち込まないこと。超初心者の私は$をターミナルにコピーしエラーを何度も吐きました。

 

もくじ

1 Homebrewをインストール

2 Nodebrewをインストール

3 Node.jsをインストール

4 Glupのインストール

5 glupfile.jsを作成する

6 glup-sass のインストール

7 タスクを実行する

 

1 Homebrewをインストール

macOS 用パッケージマネージャーです。

 

x-codeをインストール

x-codeのインストールが必須とのこと。AppStoreからダウンロードします。

インストールできたら、メニューの「Xcode」→「Preferences…」→「Locations」→「Command Line Tools」→「Xcode x.x.x」を選択します。

Homebrewをインストール

  • Homebrewの最上部に掲載されているスクリプトをターミナルに貼り付け実行します。
  • Enterを2回くらい押すとmacのパスワードを求められるので入力。
  • そのあと、$ which brewをターミナルで実行し、保存場所が表示されたらOK.

 

2 Nodebrewをインストール


node.jsのバージョン管理ツールです。

Nodebrewをインストール

  • $ brew install nodebrew
  • インストールできない場合はsudoをつけてインストール。

NodebrewのPATHを通す

  • ホームディレクトリ直下にある設定ファイル~/.bash_prifileexport PATH=$HOME/.nodebrew/current/bin:$PATHという記述を追加。
  • ~/.bash_prifileという設定ファイルにファイルがない場合は、ターミナルで$touch ~/.bash_prifileを実行。
  • $source ~/.bash_prifileを実行
  • $which nodebrewを実行しpathが表示されたらNodebrewのインストール完了。

 

3 Node.jsをインストール

  • $ brew install nodeを実行します。
  • インストールできない場合はsudoをつけてインストール。
  • $node -vを実行して、バージョンが表示されたらインストール完了。

npmのインストール

  • $npm -vを実行し、npmがインストールされているか確認後、されていなかった場合は$npm installを実行します。
  • $npm -vを実行し、バージョンが表示されたらOK。
  • インストールできない場合はsudoをつけてインストール。
  • エラーを吐いたら、エラー文を読んでそこに書いてあるコマンドを実行。

 

4 Glupをインストール


Glupはグローバルとローカルの両方にインストールします。

グローバルインストール

  • まずはグローバルインストール。$npm install -g gulp-cliを実行してインストールします。
  • インストールできない場合はsudoをつけてインストール。

ローカルインストール

  • 作業用のディレクトリに移動して、gulpをローカルインストールします
  • $ cd (作業用ディレクトリ)を実行し、作業用のディレクトリに移動します。
  • ターミナルのユーザー名の前にフォルダ名がついたら移動完了。

package.jsonを作成

  • Node.jsでプログラムを動かすために必要なパッケージマネージャーです。
  • 手動あるいは下記の方法により自動で作成できます。
  • $npm initを実行し、package name:XX(任意の名前)などの情報を入力し、Enterを押します。
  • $ npm install gulp –save-devを実行してGulpをインストールします。
  • インストールできない場合はsudoをつけてインストール。

5 glupfile.jsを作成する


Glupのタスクを設定するためのファイルです。作業ディレクトリに手動で作成します。
設定した「SassとCssを保存するフォルダ」も手動で作成しておきましょう。

const gulp = require(‘gulp’);
const sass = require(‘gulp-sass’);

gulp.task(‘default’, function () {
gulp.watch(‘scss/**/*.scss’, function () {

gulp.src(‘scss/**/*.scss’)
.pipe(sass({
outputStyle: ‘expanded’
})
.on(‘error’, sass.logError))
.pipe(gulp.dest(‘css’));
});
});

6 glup-sassをインストール

  • $ npm install gulp-sass –save-devを実行。
  • できない場合は、$npm install -D gulp-sassを実行。
  • うまくいっていたらpackage.json“gulp-sass”: “バージョン”が表示されます。

7 タスクを実行する

  • 「Sassを保存するフォルダ」にsass(.scss)ファイルを作っておきましょう。上記で「*.scss」と指定した場合は任意の名前で保存します。内容も任意のsassで書かれたCSSを用意してください。
  • ターミナルで$ npx gulpを実行すると自動でCSSが作成されているはずです!

お疲れ様でした


自動でコンパイルされるSassファイルを作ることができました!
ちなみに上記の内容でglupgile.jsを作成した場合には、Sassファイルが自動でコンパイルされる設定になっています。
あー、時間かかったなぁ〜。お疲れ様でした!

補足


うまくコンパイルされないときに見直して見ましょう。特にSCSS文法ミスのエラーに注意。
①.sassと.scssを間違えている
②ターミナルで実行後、.scssファイルを上書きするとエラーになる(scss文法のミス)

written by saki

saki

富山県生まれ.多摩美術大学在学中です.デザインの多領域を横断的に学習中.iOS/Android向けゲームアプリを共同制作しているほか(デザイン担当)、WEBデザイン/コーディングにも取り組んでいます.

新着記事