###質問
gulpで画像やCSS等を圧縮するタイミングは、基本的には配布物を生成する(ビルドタスクを走らせる)際に行うものと解釈しているのですが、
サイトの軽量化を行うのはビルド時のみで開発中は圧縮をしないので、テストサーバーに反映するファイルは圧縮前のソースになってしまいます。
作成したタスクの内容は、下記になります。
【開発時】 defaultタスクでsrcディレクトリを監視し作業を進める。(コンパイル後のCSSもこのディレクトリ) 【納品時】 buildタスクでsrcディレクトリ内の不要ファイルを除外した上でdistディレクトリにコピー。 コピーされた画像、css、jsの圧縮をするというものです。
「開発時にファイルの圧縮はせず、テストアップするファイルは圧縮&ソースマップ出力。配布物を生成するのは納品前のタイミング」
上記の場合、どう記述するのがベストなのかがわかりません。
他にプレビュー用のディレクトリを生成するとしても、中身が最終成果物であるdistディレクトリとあまり変わらないような気もします。
また、バージョン管理の事も考えると、納品までに開発ソース以外の物を含めても問題ないのかという疑問もあります。
どなたかベストな解決策をご教示いただけないでしょうか。
よろしくお願いいたします。
###gulpfile.js
javascript
1var browserSync = require('browser-sync'), 2 del = require('del'), 3 gulp = require('gulp'), 4 autoprefixer = require('gulp-autoprefixer'), 5 cleanCSS = require('gulp-clean-css'), 6 ignore = require('gulp-ignore'), 7 imagemin = require('gulp-imagemin'), 8 notify = require('gulp-notify'), 9 plumber = require('gulp-plumber'), 10 sass = require('gulp-sass'), 11 sourcemaps = require('gulp-sourcemaps'), 12 uglify = require('gulp-uglify'), 13 mozjpeg = require('imagemin-mozjpeg'), 14 pngquant = require('imagemin-pngquant'), 15 runSequence = require('run-sequence'), 16 vinylPaths = require('vinyl-paths'); 17 18var dir = { 19 src: 'src', 20 dist: 'dist' 21}; 22 23var autoprefixerOptions = { 24 browsers: [ 25 'last 2 versions', 26 'ie 11', 27 'iOS >= 8.1', 28 'Android >= 4.4' 29 ], 30 cascade: false 31}; 32 33gulp.task('sass', function() { 34 return gulp.src([dir.src + '/assets/scss/**/*.scss']) 35 .pipe(plumber({errorHandler: notify.onError('<%= error.message %>')})) 36 .pipe(sourcemaps.init()) 37 .pipe(sass({outputStyle: 'expanded'})) 38 .pipe(autoprefixer(autoprefixerOptions)) 39 .pipe(sourcemaps.write('')) 40 .pipe(gulp.dest(dir.src + '/assets/stylesheets')) 41 .pipe(browserSync.reload({stream: true})); 42}); 43 44gulp.task('browser-sync', function() { 45 browserSync({ 46 server: { 47 baseDir: dir.src 48 } 49 }); 50}); 51 52gulp.task('bs-reload', function() { 53 browserSync.reload(); 54}); 55 56gulp.task('clean:dist', function() { 57 return gulp.src([dir.dist]) 58 .pipe(vinylPaths(del)); 59}); 60 61gulp.task('copy', function() { 62 return gulp.src([ 63 dir.src + '/**/*.*', 64 '!src/**/*.scss', 65 '!src/**/*.map' 66 ]) 67 .pipe(ignore.include({isFile: true})) 68 .pipe(gulp.dest(dir.dist)) 69}); 70 71gulp.task('optimize-image', function() { 72 return gulp.src([dir.dist + '/assets/images/**/*']) 73 .pipe(imagemin([ 74 pngquant({ 75 quality: '65-80', 76 speed: 1 77 }), 78 mozjpeg({quality: 80}), 79 imagemin.svgo(), 80 imagemin.gifsicle() 81 ])) 82 .pipe(imagemin()) 83 .pipe(gulp.dest(dir.dist + '/assets/images')) 84}); 85 86gulp.task('minify-css', function() { 87 return gulp.src([dir.dist + '/assets/stylesheets/*.css']) 88 .pipe(cleanCSS()) 89 .pipe(gulp.dest(dir.dist + '/assets/stylesheets')) 90}); 91 92gulp.task('minify-js', function() { 93 return gulp.src([dir.dist + '/assets/javascripts/*.js']) 94 .pipe(uglify()) 95 .pipe(gulp.dest(dir.dist + '/assets/javascripts')) 96}); 97 98gulp.task('watch', function() { 99 gulp.watch([dir.src + '/assets/scss/**/*.scss'], ['sass']); 100 gulp.watch([dir.src + '/assets/javascripts/**/*.js'], ['bs-reload']); 101 gulp.watch([dir.src + '/**/*.html'], ['bs-reload']); 102}); 103 104gulp.task('default', function(callback) { 105 runSequence(['sass', 'browser-sync', 'watch'], callback); 106}); 107 108gulp.task('build', function(callback) { 109 runSequence('clean:dist', 'sass', 'copy', ['optimize-image', 'minify-css', 'minify-js'], callback); 110});
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。