cotton88 score 83
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": "*" |
| } |
| } |
| ``` |
