質問編集履歴

1 Tag[npm]を追加

cotton88

cotton88 score 77

2016/08/10 11:01  投稿

gulp-gzipが動いてくれない
gulp-gzipを導入しようと思い、npmからgzipをインストールしてgulpfile.jsに適宜入れてみたのですが、style.min.css.gzを出力してくれません。
.pipe(gzip()) を設置する順番を変えてみたり、npm本家を参照したりとしてみましたが、うまくいかず。optionもさほど用意されていない様ですし、詰まってしまいました。
とりあえず、sassのみにgzipを適用しようと思っています。
よろしくお願いします。
```ここに言語を入力
npm install --save-dev gulp-gzip
```
```javascript
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);
});
```
```javascript
{
"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": "*"
}
}
```
  • JavaScript

    19922 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • gulp

    325 questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

  • npm

    366 questions

    npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る