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-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 |
イイ感じ。