「gulp」＋「LibSass」（その３−２）：PJ実行編２（CSSコンパイル環境を構築）

[pj作成＋初期チェックタスク作成＋タスク実行]

mkdir ~/dev_area/gulp_libSass_samples/test3/
cd ~/dev_area/gulp_libSass_samples/test3/
npm init -y
npm install -D gulp gulp-sass

vi ~/dev_area/gulp_libSass_samples/test3/gulpfile.js


// gulp load
const gulp = require('gulp');
// complie to Sass plugin load
const sass = require('gulp-sass');

gulp.task('simple-check', (done) => {
    console.log('simple-check-exec-log');
    done();    //task is complate call done
});

npx gulp simple-check
[result]
[12:03:30] Using gulpfile ~/dev_area/gulp_libSass_samples/test3/gulpfile.js
[12:03:30] Starting ‘simple-check’…
simple-check-exec-log
[12:03:30] Finished ‘simple-check’ after 214 μs

「コマンド実行は、OK」


[cssなどをコンパイルする環境を作る]
参考URL：http://brush-clover.com/web/gulp-sass-compass-env/

npm install --save-dev gulp <-このコマンドにはあまり意味はなかったようだ
[Gulpでタスク実行させるためのディレクトリ構成]

    
[base_dir] =    ~/dev_area/gulp_libSass_samples/test3/ 
    
[base_dir]/
├── index.html <-今回手動で作成
├── sass/　　　 <-今回手動で作成
├── css/　　　　<-今回手動で作成
├── (その他ファイルやディレクトリ)
├── node_modules/
├── package.json
└── gulpfile.js

vi ~/dev_area/gulp_libSass_samples/test3/gulpfile.js


// gulp load
const gulp = require('gulp');
// complie to Sass plugin load
const sass = require('gulp-sass');

gulp.task('simple-check', (done) => {
    console.log('simple-check-exec-log');
    done();    //task is complate call done
});

gulp.task('sass_1', (done) => {
    // compirebase scss files load
    gulp.src('./sass/*.scss')
     .pipe(sass()) // exec compoile (pipe)
     .pipe(gulp.dest('./css')); // output dir (pipe)
});

ファイル[./sass/style.scss]の中身


$colorBlack : #454545;

p {
  color : $colorBlack;
}

「コンパイル実行」

npx gulp sass_1

[result]
./css/style.css ファイルが出力される


p {
  color: #454545; }

出力されたCSSファイルを見ると、宣言の最終行と中括弧（}）が、同一行になっている。
普段見慣れているのは最終行の中括弧が改行された形式かと思います。
出力時の設計のコードを整形するには、メソッドでコンパイル時のオプションを{outputStyle: 'expanded'}と指定します。
参考URL：https://ics.media/entry/3290/3



// gulp load
const gulp = require('gulp');
// complie to Sass plugin load
const sass = require('gulp-sass');

gulp.task('simple-check', (done) => {
    console.log('simple-check-exec-log');
    done();    //task is complate call done
});

gulp.task('sass_1', (done) => {
    // compirebase scss files load
    gulp.src('./sass/*.scss')
     .pipe(sass({outputStyle: 'expanded'})) // exec compoile (pipe)
     .pipe(gulp.dest('./css')); // output dir (pipe)
});

プラグインはオプション指定で細かく設定できます。
(どのようなオプションが設定できるかは、プラグインによって異なります。)

※ Sassの出力時のコードはexpandedの他に、
nested(ネストがインデントされる)、
compact（規則集合毎が1行になる）、
compressed（全CSSコードが1行になる）などがあります。