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
Author And Source
この問題について(gulpメモ), 我々は、より多くの情報をここで見つけました https://qiita.com/dokkoisho/items/bbefb3f6071df01637c3著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .