WEB制作(html・css(スタイルシート))に関する各種メモ書き

gulpでJavaScript, CSS, 画像 を圧縮 + 便利な機能を使用する

このページのGulpプラグインを一気にインストールするには

npm install --save-dev gulp
npm install --save-dev gulp-uglify
npm install --save-dev gulp-cssmin
npm install --save-dev gulp-rename
npm install --save-dev imagemin
gulp-uglify : JavaScriptを圧縮する
gulp-cssmin : CSSを圧縮する
gulp-rename : ファイル名をリネームする

● JavaScriptをコメントを残して圧縮(minify)する uglify

uglifyのインストール

npm install --save-dev gulp-uglify

uglifyのGulp設定(gulpfile.js に記述)

//
// JavaScript minify設定(uglify)
//
var uglify = require("gulp-uglify");
var rename  = require( 'gulp-rename' );
gulp.task('jsmin', function() {
    gulp.src('./js/*.js')
        .pipe(uglify({preserveComments: 'some'}))
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('./js_min'));
});

コメントを残す方法( ! を以下のようにつける)

/*! 
  残したいコメント
*/

● CSSを圧縮(minify)する cssmin

cssminのインストール

npm install --save-dev gulp-cssmin

cssminのGulp設定(gulpfile.js に記述)

//
// CSS minify設定
//
var cssmin = require( 'gulp-cssmin' );
var rename = require( 'gulp-rename' );
gulp.task('cssmin', function () {
    gulp.src('./css/*.css')
    .pipe( cssmin() )
    // .pipe( rename({suffix: '.min'}) )
    .pipe( gulp.dest('./css_min') );
});

● CSSスタイルガイドジェネレーター frontnote

CSSスタイルガイドジェネレーターはCSSファイルからのドキュメントを生成するとても便利なものです。 frontnote以外にも kss-node, sc5-stylgeduige, などがありますが frontnoteは簡単で使いやすいのでおすすめです。

frontnoteのインストール

npm install frontnote --save-dev
npm install --save-dev gulp-frontnote

frontnoteのGulp設定(gulpfile.js に記述)

//
// CSSスタイルガイド frontnote 設定( .scss ファイルからスタイルガイドを生成します)
//
var frontNote = require('gulp-frontnote');
gulp.task('frontnote', function () {
gulp.src('./scss/*.scss')
    .pipe(frontNote({
        out: './frontnote',
    }));
});

● 画像( jpg , png )を圧縮する imagemin

imageminのインストール

npm install --save-dev gup-imagemin

imageminのGulp設定(gulpfile.js に記述)

// // jpeg , png 圧縮設定 // var imagemin = require('gulp-imagemin'); gulp.task('imagemin', function(){ gulp.src(['www/img/.{png,jpg}', 'www/img//*.{png,jpg}']) .pipe(imagemin()) .pipe(gulp.dest('www/img/')); });


関連エントリー

No.1043
07/19 10:53

edit

gulp