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 が利用できました。
はじめてのNode.js -サーバーサイドJavaScriptでWebアプリを開発する-
- 作者: 松島浩道
- 出版社/メーカー: ソフトバンククリエイティブ
- 発売日: 2013/03/15
- メディア: 大型本
- クリック: 15回
- この商品を含むブログ (5件) を見る
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る