イナヅマTVログ

Gulp 始めてみましたのメモ – 2 – CSSをminify

| 0件のコメント

Gulp 始めてみましたのメモ – 1 – 導入からCompass の続き。
.scss から .css ができたので次は minify してみる。

CSS minify

リリース用に .css をminifyしてみる。

"use strict";
 
var gulp = require( 'gulp' );
var plumber = require( 'gulp-plumber' );
var size = require('gulp-size');
var minifycss = require('gulp-minify-css');
var rename = require( 'gulp-rename' );
 
gulp.task( 'css-min', function () {
 
  return gulp.src(
    [
      'PROJECT_DIR/**/*.css',
      '!PROJECT_DIR/**/*.min.css',
      '!PROJECT_DIR/**/*.pack.css'
    ] )
    .pipe( plumber() )
    .pipe( minifycss() )
    .pipe( rename( { suffix: '.min' } ) )
    .pipe( gulp.dest( 'RELEASE_DIR' ) )
    .pipe( size( { title: 'css-min' } ) );
} );

example.css を minify しリリース用ディレクトリへ example.min.css とリネームし書き出します。
example.min.css, example.pack.css は minify 対象から外します。

gulp-minify-css

gulp-minify-css

gulp-rename

gulp-rename

option

  • dirname
  • basename
  • prefix
  • suffix
  • extname

こんな感じで使うらしい。

// rename via string
gulp.src("./src/main/text/hello.txt")
  .pipe(rename("main/text/ciao/goodbye.md"))
  .pipe(gulp.dest("./dist")); 
  // ./dist/main/text/ciao/goodbye.md
 
// rename via function
gulp.src("./src/**/hello.txt")
  .pipe(rename(function (path) {
      path.dirname += "/ciao";
      path.basename += "-goodbye";
      path.extname = ".md"
  }))
  .pipe(gulp.dest("./dist"));
  // ./dist/main/text/ciao/hello-goodbye.md
 
// rename via hash
gulp.src("./src/main/text/hello.txt", { base: process.cwd() })
  .pipe(rename({
      dirname: "main/text/ciao",
      basename: "aloha",
      prefix: "bonjour-",
      suffix: "-hola",
      extname: ".md"
  }))
  .pipe(gulp.dest("./dist")); 
  // ./dist/main/text/ciao/bonjour-aloha-hola.md

イイ感じ。

コメントを残す

必須欄は * がついています