sass、gulpメモ(node.js)
sassの導入(Node.js)
Node.jsをインストール
https://nodejs.org/ja/
公式よりダウンロード
コマンドプロンプト、ターミナルでインストールされているか確認
下記のコマンドをたたく
node -v
バージョン情報が報じされていれば完了
package.jsonの作成
作業するフォルダのルートに作成
インストールしたパッケージ情報などが記載されてあるらしい。
作成したいディレクトリにcdとかで移動して、
下記コマンドでpackage.jsonを作成
npm init -y
該当ディレクトリにpackage.jsonができれいればok
Gulpのインストール
該当の作業フォルダ(ローカル環境)以下で、gulpを使えるようにするために、
下記のコマンドを実行してインストールする
npm install -D gulp
タスクの作成
必要なものをローカルにインストール
SassをGulpでコンパイルするためには次の2つのモジュールをインストールする必要がある。
・Gulp本体のgulp
・Sassファイルをコンパイルする為のプラグインgulp-sass
下記のコマンドで両方インストールできる。
npm install -D gulp gulp-sass
gulpを使用するのに必要なgulpfile.jsを作業ファイルにを作成
gulpfile.jsにsassをコンパイルするための下記のコードを記載
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// style.scssをタスクを作成する
gulp.task('default', function () {
// style.scssファイルを取得
gulp.src('css/style.scss')
// Sassのコンパイルを実行
.pipe(sass())
// cssフォルダー以下に保存
.pipe(gulp.dest('css'));
});
これで設定は完了
コンパイルしてみる
npx gulp
このコマンドでscssファイルがcssにコンパイルされる
保存場所などはgulpfile.jsに記載されている
今回だと「ルート/css」にscssがいて
それをコンパイルして「ルート/css」に出力されている
watch機能
指定したscssファイルを監視して、そのファイルに変更があるたびに、
自動でcssにコンパイルして出力してくれる。
下記コードをgulpfile.jsに記載すればok
// Sassのコンパイルタスクのサンプルファイルです。
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// style.scssの監視タスクを作成する
gulp.task('default', function () {
// ★ style.scssファイルを監視
gulp.watch('css/style.scss', function () {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
gulp.src('css/style.scss')
// Sassのコンパイルを実行
.pipe(sass({
outputStyle: 'expanded'
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on('error', sass.logError))
// cssフォルダー以下に保存
.pipe(gulp.dest('css'));
});
});
下記コマンドで監視を開始
npx gulp
監視を終了する場合はコマンドを開いてCtrlとCキー同時押して終了
備忘録もかねてのざっくりメモでした。
こちらの記事を参考にさせていただきました。
絶対つまずかないGulp入門(2018年版) – インストールとSassを使うまでの手順
Author And Source
この問題について(sass、gulpメモ(node.js)), 我々は、より多くの情報をここで見つけました https://qiita.com/kamenaris/items/bbaf85c52a228587833e著者帰属:元の著者の情報は、元の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 .