(91) Node.js + gulpでSASSを Windows10で実行

投稿者: | 2020年12月22日

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

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

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

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

gulp.task('mygulp', function() {
  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));
});

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

(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 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');

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

gulp.task('mygulp', function() {
  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));
  }
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)