680 views

1. やりたいこと

過去記事 (65) Node.js + gulpでSASSを実行 ができる環境を Windows10上でも作りたい。

2. やってみる！

(1) node.jsをインストールする。

下記のサイトから Windows版のインストーラーをダウンロードして実行する。
https://nodejs.org/ja/

(2) 任意のrootディレクトリへ移動する。

コマンドプロンプトを起動し、gulpを使いたい環境のTOPディレクトリへ移動する。

例) D:\mydev\test の場合

C:\> D:
D:\> cd D:\mydev\test

(3) 各プログラムをインストール

以下、コピペでよい。

npm init

以下、コピペでよい。

npm install -g gulp
npm install -D gulp
npm install -D gulp-sass
npm install -D sass

(4) 上記(2)のrootでgulpファイルを書く。

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

var sass_options = {   // sassオプション
	outputStyle: 'compressed',
	sourceMap: false,
	sourceComments: false
};

function myCallbackDone(){
}
gulp.task('mygulp', function(myCallbackDone) {
  var dest = './myenv/www.example.com.release_GULP';   // 出力先を指定（どこでも可）
  var src  = './myenv/www.example.com/**/style.scss';
  gulp.src(src).pipe(compileSass(sass_options)).pipe(gulp.dest(dest));
  myCallbackDone();
});

※「**」は、「配下のどこのフォルダでも」を指定するワイルドカードを表す。

(5) gulp実行

ここでは実行結果をログファイルとして出力させている。（やらなくてもよい）

gulp mygulp > log_mygulp.txt

3. 応用

以下、個人的に新環境を作るときの備忘録。

npm init

npm install -g gulp
npm install -D gulp
npm install -D gulp-sass
npm install -D sass
npm install -D gulp-imagemin
npm install -D gulp-changed
npm install -D imagemin-jpeg-recompress
npm install -D imagemin-pngquant
npm install -D imagemin-gifsicle
npm install -D gulp-uglify
npm install -D gulp-clean-css

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var minifyJs = require('gulp-uglify');
var isChanged = require('gulp-changed');
var minifyImg = require('gulp-imagemin');
var minifyImg_JPG = require('imagemin-jpeg-recompress');
var minifyImg_PNG = require('imagemin-pngquant');
var minifyImg_GIF = require('imagemin-gifsicle');
var compileSass = require('gulp-sass')(require('sass'));

var sass_options = {
  outputStyle: 'compressed',
  sourceMap: false,
  sourceComments: false
};

function myCallbackDone(){
}

gulp.task('mygulp', function(myCallbackDone) {
  var base_dir = './myenv/www.example.com';
  var dest = base_dir + '.release_GULP';      // 出力先
  {  // CSS
    var src  = base_dir + '/**/*.css';
    gulp.src(src).pipe(cleanCSS()).pipe(gulp.dest(dest));
  }
  {  // SCSS
    var src  = base_dir + '/**/style.scss';
    gulp.src(src).pipe(compileSass(sass_options)).pipe(gulp.dest(dest));
  }
  {  // 画像ファイル
    var src  = base_dir + '/**/*.+(jpg|jpeg|png|gif)';
    gulp.src(src).pipe(isChanged(dest)).pipe(minifyImg([minifyImg_JPG(),minifyImg_PNG(),minifyImg_GIF()])).pipe(gulp.dest(dest));
  }
  {  // JavaScript
    var src  = base_dir + '/**/*.js';
    gulp.src(src).pipe(minifyJs()).pipe(gulp.dest(dest));
  }
  myCallbackDone();
});

【追記 #1】2021.01.21

久しぶりに実行してみたら以下のエラーが出た。

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

対策

1) sassをインストールする。

npm install -D sass

2) gulpfile.jsの記述を変更する。

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

　↓ 変更

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

【追記 #2】2021.01.21

以下の警告も出た。

[23:56:57] The following tasks did not complete: mygulp
[23:56:57] Did you forget to signal async completion?

対策

完了通知用のコールバック関数を追記する。

gulp.task('mygulp', function() {
  // いろいろ
});

　↓ 変更

function myCallbackDone(){
}

gulp.task('mygulp', function(myCallbackDone) {
  // いろいろ
  myCallbackDone();
});

---