質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.33%

gulp-gzipが動いてくれない

受付中

回答 0

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 823

cotton88

score 83

gulp-gzipを導入しようと思い、npmからgzipをインストールしてgulpfile.jsに適宜入れてみたのですが、style.min.css.gzを出力してくれません。

.pipe(gzip()) を設置する順番を変えてみたり、npm本家を参照したりとしてみましたが、うまくいかず。optionもさほど用意されていない様ですし、詰まってしまいました。

とりあえず、sassのみにgzipを適用しようと思っています。
よろしくお願いします。

npm install --save-dev gulp-gzip
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
var reload = browserSync.reload;
var plumber = require('gulp-plumber');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var sass = require('gulp-sass');
var csslint = require('gulp-csslint');
var autoPrefixer = require('gulp-autoprefixer');
//if node version is lower than v.0.1.2
require('es6-promise').polyfill();
var cssComb = require('gulp-csscomb');
var cmq = require('gulp-merge-media-queries');
var frontnote = require('gulp-frontnote');
var cleanCss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var imageMin = require('gulp-imagemin');
var cache = require('gulp-cache');
var notify = require('gulp-notify');
var gzip = require('gulp-gzip');

gulp.task('sass',function(){
    gulp.src(['src/asset/css/**/*.scss'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(frontnote({
            out: 'frontnote',
            css: '../dist/asset/css/style.css'
        }))
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoPrefixer({browsers: ['last 5 versions'], cascade: false}))
        .pipe(cssComb())
        .pipe(cmq({log:true}))
        .pipe(csslint())
        .pipe(csslint.reporter())
        .pipe(gulp.dest('dist/asset/css'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(cleanCss())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('dist/asset/css'))
        .pipe(reload({stream:true}))
        .pipe(gzip())
        .pipe(notify('css task finished'));
});
gulp.task('js',function(){
    gulp.src(['src/asset/js/**/*.js'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest('dist/asset/js'))
        .pipe(rename({
            suffix: '.min'
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/asset/js'))
        // .pipe(reload())
          .pipe(notify('js task finished'));
});
gulp.task('html',function(){
    gulp.src(['src//**/*.html'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(gulp.dest('dist/'))
        // .pipe(reload())
        .pipe(notify('html task finished'));
});
gulp.task('image',function(){
    gulp.src(['src/asset/images/**/*'])
        .pipe(plumber({
            handleError: function (err) {
                console.log(err);
                this.emit('end');
            }
        }))
        .pipe(cache(imageMin()))
        .pipe(gulp.dest('dist/asset/images'))
        // .pipe(reload())
        .pipe(notify('image task finished'));
});
gulp.task('default',function(){
    browserSync.init({
        server: "dist/"
    });
    // .on('change', reload)を追加
    gulp.watch('src/asset/js/**/*.js',['js']).on('change', reload);
    gulp.watch('src/asset/css/**/*.scss',['sass']).on('change', reload);
    gulp.watch('src//**/*.html',['html']).on('change', reload);
    gulp.watch('src/asset/images/**/*',['image']).on('change', reload);
});
{
  "name": "gulpfile",
  "version": "1.1.0",
  "description": "",
  "author": "",
  "url": "",
  "license": "MIT License",
  "keywords": "gulp",
  "devDependencies": {
    "browser-sync": "*",
    "es6-promise": "*",
    "gulp": "*",
    "gulp-autoprefixer": "*",
    "gulp-cache": "*",
    "gulp-clean-css": "*",
    "gulp-csscomb": "*",
    "gulp-csslint": "*",
    "gulp-frontnote": "*",
    "gulp-gzip": "^1.4.0",
    "gulp-imagemin": "*",
    "gulp-merge-media-queries": "*",
    "gulp-notify": "*",
    "gulp-plumber": "*",
    "gulp-rename": "*",
    "gulp-sass": "*",
    "gulp-sourcemaps": "*",
    "gulp-uglify": "*"
  }
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る