gulp を使って自動でsass を自動コンパイルできるようにする
一体何番煎じになる記事だろうか…。
gulp を使ってsass を自動コンパイルできるようにした。
事前準備
gulp を使えるようにするには、予め以下をインストールする必要がある。
-
node.js Rubysass
これらのインストールについてはOS によって異なるため、省略。
(2019年3月22日削除)
npm init
node.js インストール後、gulp をインストールしたいディレクトリで以下のコマンドを実行する。
npm init
特に指定がない場合、そのままEnter/Return を押せばよい。
その後、package.json が生成される。
gulp のインストール
以下のコマンドを実行してgulp をインストールする(グローバルと開発用)。
npm install gulp -g
npm install gulp --save-dev
gulp-sass も必要になるため、以下のコマンドを実行させてインストールする。
npm install gulp-sass --save-dev
gulpfile.js の設定
gulpfile.js を作成し、.scss ファイルの格納場所やコンパイルしてできた.css ファイルをどこに出力させるか、などの設定を記述する。
今回の記述例は以下のとおり。参考URL をとても参考にした。
const gulp = require('gulp');
const sass = require('gulp-sass');
// sassとcssの保存先
gulp.task('sass', function(){
gulp.src('./sass/**/*.scss')
.pipe(sass({outputStyle: 'expanded'}))
.pipe(gulp.dest('./css/'));
});
//自動監視
gulp.task('sass-watch', ['sass'], function(){
var watcher = gulp.watch('./sass/**/*.scss', ['sass']);
watcher.on('change', function(event) {
});
});
gulp.task('default', ['sass-watch']);
gulp をコマンドで起動すると自動で.scss ファイルの監視が始まる。
sass ディレクトリに作成された.scss ファイルが編集されて更新された時、自動でコンパイルして.css を生成する。css ディレクトリにコンパイルした.css ファイルを出力するようにしている。出力された.css ファイルは、expanded 形式で出力。
gulp の起動
package.json があるディレクトリ内で以下のコマンドを実行すると、.scss ファイルの自動監視が始まる。
% gulp
[17:18:43] Using gulpfile ~/hoge/gulpfile.js
[17:18:43] Starting 'sass'...
[17:18:43] Finished 'sass' after 6.81 ms
[17:18:43] Starting 'sass-watch'...
[17:18:43] Finished 'sass-watch' after 11 ms
[17:18:43] Starting 'default'...
[17:18:43] Finished 'default' after 21 μs
参考URL
ありがとうございました。
https://qiita.com/M_amourr/items/09c8bb4e2b2981cafe7a
Author And Source
この問題について(gulp を使って自動でsass を自動コンパイルできるようにする), 我々は、より多くの情報をここで見つけました https://qiita.com/shimisunet/items/d8827b20cd5aeab2f9d2著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .