gulpメモ


gulpメモ

gulpで画像圧縮できるのですね。
coffeescriptはおまけです。

gulpfile.js

var gulp = require('gulp');

var cTime = new Date(); //作成時間

var imagemin = require('gulp-imagemin');     // 画像圧縮
var pngquant = require('imagemin-pngquant'); // png
var mozjpeg = require('imagemin-mozjpeg');   // jpeg

var coffee = require('gulp-coffee');       // coffee scriptをjavascriptへコンパイル
var concat = require('gulp-concat');       // 上記でコンパイルしたものを(ファイルが複数あった場合、1つに)結合
var uglify = require('gulp-uglify');       // 上記を圧縮(****.min.jsに)する
var plumber = require('gulp-plumber');     // エラーでもファイル監視(watch)を続ける
var header = require('gulp-header');       // ヘッダーをつける

var sass = require('gulp-sass'); // sass
var autoprefixer  = require('gulp-autoprefixer'); // ベンダープレフィックスの付与

var babel = require("gulp-babel"); // バベル


//jpegとpngを圧縮するためのタスク
gulp.task('imageOptimize',function(){
    gulp.src("./images/*.{png,jpg}")
    .pipe(imagemin(
        [
            pngquant({
                quality: '45-55',
                speed: 1
            }),
            mozjpeg({
                quality:60,
                progressive: true
            }),
            imagemin.svgo(),
            imagemin.optipng(),
            imagemin.gifsicle()
        ]
    ))
    .pipe(gulp.dest('./img'));
});

//scriptのコンパイル
gulp.task('coffeeCompile',function(){
    gulp.src('./coffee/*')      // coffeeディレクトリ以下全てのファイルを指定
    .pipe(plumber())            // エラーでwatchが止まらないように
    .pipe(coffee())             // jsにコンパイル
    .pipe(concat('functions.min.js')) // 一つのファイルに結合する
    .pipe(uglify())             // 圧縮する
    .pipe(header('/* created ' + cTime + ' */\n')) // ファイル作成した時間をコメントアウトでファイル内の先頭に記述
    .pipe( gulp.dest('./js'));  // jsディレクトリに書き出す
});


//sassのコンパイル
gulp.task('compileSass', function(){
    gulp.src('./sass/style.scss')
    .pipe(plumber())            // エラーでwatchが止まらないように
    .pipe(sass({outputStyle: 'compressed'})) // 圧縮する(***.min.css)
    .pipe(autoprefixer({ // ベンダープレフィックスの付与
        browsers: ['last 3 version', 'ie >= 10','iOS >= 9.3', 'Android >= 4.4'], // (ベンダープレフィックスを付与する)対応ブラウザの指定
        cascade: false // 整形しない
    }))
    .pipe(header('/* created ' + cTime + ' */\n')) // ファイル作成した時間をコメントアウトでファイル内の先頭に記述
    .pipe(gulp.dest('./css')); // cssディレクトリに書き出す
});


// es6 → es5へコンパイル
gulp.task('jsCompile', function(){
    gulp.src('./es6/main.js')
    .pipe(babel())
    .pipe(gulp.dest('./js'));
});


gulp.task('watch', function(){
    gulp.watch(['./sass/style.scss','./coffee/*','./es6/main.js'],['coffee
Compile','compileSass',,'jsCompile']);
});


gulp.task('default',['watch']);

coffeescriptとsassとjs(es6)はファイル更新を監視して(watch)すぐコンパイル。

gulp

画像はまとめて圧縮

gulp imageOptimize