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

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

新規登録して質問してみよう
ただいま回答率
85.50%
npm

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

JavaScript

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

gulp

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

Q&A

0回答

1991閲覧

gulp-gzipが動いてくれない

cotton88

総合スコア87

npm

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

JavaScript

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

gulp

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

0グッド

0クリップ

投稿2016/08/07 23:08

編集2022/01/12 10:55

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

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

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

npm install --save-dev gulp-gzip

javascript

1var gulp = require('gulp'); 2var browserSync = require('browser-sync').create(); 3var reload = browserSync.reload; 4var plumber = require('gulp-plumber'); 5var rename = require('gulp-rename'); 6var sourcemaps = require('gulp-sourcemaps'); 7var sass = require('gulp-sass'); 8var csslint = require('gulp-csslint'); 9var autoPrefixer = require('gulp-autoprefixer'); 10//if node version is lower than v.0.1.2 11require('es6-promise').polyfill(); 12var cssComb = require('gulp-csscomb'); 13var cmq = require('gulp-merge-media-queries'); 14var frontnote = require('gulp-frontnote'); 15var cleanCss = require('gulp-clean-css'); 16var uglify = require('gulp-uglify'); 17var imageMin = require('gulp-imagemin'); 18var cache = require('gulp-cache'); 19var notify = require('gulp-notify'); 20var gzip = require('gulp-gzip'); 21 22gulp.task('sass',function(){ 23 gulp.src(['src/asset/css/**/*.scss']) 24 .pipe(plumber({ 25 handleError: function (err) { 26 console.log(err); 27 this.emit('end'); 28 } 29 })) 30 .pipe(frontnote({ 31 out: 'frontnote', 32 css: '../dist/asset/css/style.css' 33 })) 34 .pipe(sourcemaps.init()) 35 .pipe(sass()) 36 .pipe(autoPrefixer({browsers: ['last 5 versions'], cascade: false})) 37 .pipe(cssComb()) 38 .pipe(cmq({log:true})) 39 .pipe(csslint()) 40 .pipe(csslint.reporter()) 41 .pipe(gulp.dest('dist/asset/css')) 42 .pipe(rename({ 43 suffix: '.min' 44 })) 45 .pipe(cleanCss()) 46 .pipe(sourcemaps.write()) 47 .pipe(gulp.dest('dist/asset/css')) 48 .pipe(reload({stream:true})) 49 .pipe(gzip()) 50 .pipe(notify('css task finished')); 51}); 52gulp.task('js',function(){ 53 gulp.src(['src/asset/js/**/*.js']) 54 .pipe(plumber({ 55 handleError: function (err) { 56 console.log(err); 57 this.emit('end'); 58 } 59 })) 60 .pipe(gulp.dest('dist/asset/js')) 61 .pipe(rename({ 62 suffix: '.min' 63 })) 64 .pipe(uglify()) 65 .pipe(gulp.dest('dist/asset/js')) 66 // .pipe(reload()) 67 .pipe(notify('js task finished')); 68}); 69gulp.task('html',function(){ 70 gulp.src(['src//**/*.html']) 71 .pipe(plumber({ 72 handleError: function (err) { 73 console.log(err); 74 this.emit('end'); 75 } 76 })) 77 .pipe(gulp.dest('dist/')) 78 // .pipe(reload()) 79 .pipe(notify('html task finished')); 80}); 81gulp.task('image',function(){ 82 gulp.src(['src/asset/images/**/*']) 83 .pipe(plumber({ 84 handleError: function (err) { 85 console.log(err); 86 this.emit('end'); 87 } 88 })) 89 .pipe(cache(imageMin())) 90 .pipe(gulp.dest('dist/asset/images')) 91 // .pipe(reload()) 92 .pipe(notify('image task finished')); 93}); 94gulp.task('default',function(){ 95 browserSync.init({ 96 server: "dist/" 97 }); 98 // .on('change', reload)を追加 99 gulp.watch('src/asset/js/**/*.js',['js']).on('change', reload); 100 gulp.watch('src/asset/css/**/*.scss',['sass']).on('change', reload); 101 gulp.watch('src//**/*.html',['html']).on('change', reload); 102 gulp.watch('src/asset/images/**/*',['image']).on('change', reload); 103}); 104

javascript

1{ 2 "name": "gulpfile", 3 "version": "1.1.0", 4 "description": "", 5 "author": "", 6 "url": "", 7 "license": "MIT License", 8 "keywords": "gulp", 9 "devDependencies": { 10 "browser-sync": "*", 11 "es6-promise": "*", 12 "gulp": "*", 13 "gulp-autoprefixer": "*", 14 "gulp-cache": "*", 15 "gulp-clean-css": "*", 16 "gulp-csscomb": "*", 17 "gulp-csslint": "*", 18 "gulp-frontnote": "*", 19 "gulp-gzip": "^1.4.0", 20 "gulp-imagemin": "*", 21 "gulp-merge-media-queries": "*", 22 "gulp-notify": "*", 23 "gulp-plumber": "*", 24 "gulp-rename": "*", 25 "gulp-sass": "*", 26 "gulp-sourcemaps": "*", 27 "gulp-uglify": "*" 28 } 29} 30

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問