Windows 10 の Bash on Ubuntu on Windows で Node.js/gulp/Sass を実行する

【スポンサーリンク】

現在 Windows 10 Insider Preview で提供され、今夏に正式リリース予定の Bash on Ubuntu on Windows では Node.js を利用することができます。今回は Node.js をインストールし、さらに gulp と Sass を実行してみます。

なお、Bash on Ubuntu on Windows 自体のインストール方法は以下の記事を参照してください。今回利用したのは Windows 10 Insider Preview Build 14390 です。 docs.hatenablog.jp

Node.js

まず、Bash on Ubuntu on Windows を起動して次のコマンドを実行し、公式の Node.js の安定バージョンである4系をインストールします。

curl -sL https://deb.nodesource.com/setup_4.x | bash -
apt-get install -y nodejs

インストールが成功すると node コマンドが利用可能になります。次のコマンドで Node.js のバージョン番号を確認できます。

node -v

パッケージマネージャである npm コマンドも利用可能になります。次のコマンドで npm のバージョン番号を確認できます。

npm -v

Node.js は JavaScript の実行環境ですので、簡単な JavaScript のコードを実行して動作を確認してみます。以下のコードを hello.js というファイル名で保存します。

console.log('Hello, Node.');

コードが正しければ、次のコマンドを実行すると画面に「Hello, Node.」と出力されます。

node hello.js

gulp

次はタスクランナーである gulp をパッケージマネージャ npm でインストールします。次のコマンドを実行して、gulp のコマンドラインツールをインストールします。

npm install -g gulp-cli

インストールが成功すると gulp コマンドが利用可能になります。次のコマンドで gulp のバージョン番号を確認できます。

gulp -v

では、gulp で簡単なタスクを実行して動作を確認してみます。まず、適当なディレクトリで次のコマンドを実行します。今回は作業用にnodeという名前のディレクトリを作成しました。

npm init

いくつか質問されますが、今回はすべてデフォルト値のまま(すべてエンターキーを押して)、最後に Is this ok? (yes) と表示されるので yes と入力します。

さらに次のコマンドを実行します。

npm install --save-dev gulp

これで gulp を実行する環境ができました。以下のコードを gulpfile.js というファイル名で保存します。

var gulp = require('gulp');

gulp.task('default', function() {
    console.log('Hello, gulp.');
});

コードが正しければ、次のコマンドを実行すると画面に「Hello, gulp.」と出力されます。

gulp

Sass

最後は Sass をインストールします。次のコマンドを実行して、gulp のタスクとして実行できる gulp-sass をインストールします。

npm install --save-dev gulp-sass

では、簡単な Sass のコードを CSS に変換してみます。まず、Sass のファイルを保存するディレクトリと、変換後の CSS ファイルを保存するディレクトリを作成しておきます。今回は sass-src ディレクトリと sass-dest ディレクトリを作成しました。

mkdir sass-src sass-dest

次に、以下のコードを sample.scss というファイル名で sass-src ディレクトリに保存します。

$sample-color: #f00;
body {
  color: $sample-color;
}

次に、gulpfile.js ファイルを次のように書き換えます。

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

gulp.task('sass', function() {
    gulp.src('./sass-src/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./sass-dest'));
});

コードが正しければ、次のコマンドを実行すると sass-dest ディレクトリに sample.css というファイルが作成されます。

gulp sass

sample.css を見ると正しく CSS に変換されています。

body {
  color: #f00; }

このように、Bash on Ubuntu on Windows でも通常の Ubuntu にインストールするのとほぼ同じ操作で Node.js、gulp、Sass が利用できました。

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語