2015-10-29 6 views
4

Я начал проект с [RDash angular dashboard][1], который использовал глоток. это первый раз, когда я работаю с gulp, и проблема в том, что пока я работаю локально, я не могу отлаживать, потому что он минимизирует файлы css/js/html.Предотвратите проглатывание кода на локальном компьютере

Как предотвратить образование галпов при работе локально?

Вот что я имею на gulpfile.js:

var gulp = require('gulp'), 
usemin = require('gulp-usemin'), 
wrap = require('gulp-wrap'), 
connect = require('gulp-connect'), 
watch = require('gulp-watch'), 
minifyCss = require('gulp-minify-css'), 
minifyJs = require('gulp-uglify'), 
concat = require('gulp-concat'), 
less = require('gulp-less'), 
rename = require('gulp-rename'), 
minifyHTML = require('gulp-minify-html'); 

var paths = { 
scripts: 'src/js/**/*.*', 
styles: 'src/less/**/*.*', 
images: 'src/img/**/*.*', 
templates: 'src/templates/**/*.html', 
index: 'src/index.html', 
bower_fonts: 'src/components/**/*.{ttf,woff,eof,svg}', 
}; 

/** 
* Handle bower components from index 
    */ 
    gulp.task('usemin', function() { 
return gulp.src(paths.index) 
    .pipe(usemin({ 
     js: [minifyJs(), 'concat'], 
     css: [minifyCss({keepSpecialComments: 0}), 'concat'], 
    })) 
    .pipe(gulp.dest('dist/')); 
}); 

/** 
* Copy assets 
    */ 
gulp.task('build-assets', ['copy-bower_fonts']); 

gulp.task('copy-bower_fonts', function() { 
return gulp.src(paths.bower_fonts) 
    .pipe(rename({ 
     dirname: '/fonts' 
    })) 
    .pipe(gulp.dest('dist/lib')); 
}); 

/** 
* Handle custom files 
*/ 
gulp.task('build-custom', ['custom-images', 'custom-js', 'custom-less',   'custom-templates']); 

gulp.task('custom-images', function() { 
return gulp.src(paths.images) 
    .pipe(gulp.dest('dist/img')); 
}); 

gulp.task('custom-js', function() { 
return gulp.src(paths.scripts) 
    .pipe(minifyJs()) 
    .pipe(concat('dashboard.min.js')) 
    .pipe(gulp.dest('dist/js')); 
}); 

gulp.task('custom-less', function() { 
return gulp.src(paths.styles) 
    .pipe(less()) 
    .pipe(gulp.dest('dist/css')); 
}); 

gulp.task('custom-templates', function() { 
return gulp.src(paths.templates) 
    .pipe(minifyHTML()) 
    .pipe(gulp.dest('dist/templates')); 
}); 

/** 
* Watch custom files 
*/ 
gulp.task('watch', function() { 
gulp.watch([paths.images], ['custom-images']); 
gulp.watch([paths.styles], ['custom-less']); 
gulp.watch([paths.scripts], ['custom-js']); 
gulp.watch([paths.templates], ['custom-templates']); 
gulp.watch([paths.index], ['usemin']); 
}); 

/** 
* Live reload server 
*/ 
gulp.task('webserver', function() { 
connect.server({ 
    root: 'dist', 
    livereload: true, 
    port: 8888 
}); 
}); 

gulp.task('livereload', function() { 
gulp.src(['dist/**/*.*']) 
    .pipe(watch()) 
    .pipe(connect.reload()); 
}); 

/** 
* Gulp tasks 
*/ 
gulp.task('build', ['usemin', 'build-assets', 'build-custom']); 
gulp.task('default', ['build', 'webserver', 'livereload', 'watch']); 
+0

FYI gulp-minify-css был [устарел] (https://www.npmjs.com/package/gulp-minify-css) в пользу [gulp-clean-css] (https: // github. com/scniro/gulp-clean-css) – scniro

ответ

2

Вы должны добавить Глоток-преуменьшать и использовать его следующим образом:

var minify = require('gulp-minify'); 

gulp.task('compress', function() { 
    gulp.src('lib/*.js') 
    .pipe(minify({ 
     exclude: ['tasks'], 
     ignoreFiles: ['.combo.js', '-min.js'] 
    })) 
    .pipe(gulp.dest('dist')) 
}); 

Передайте файлы, которые вы не хотите, чтобы Минимизировать в exclude.

В вашем коде, вы указали, что вы хотите, чтобы Минимизировать все файлы здесь:

gulp.task('usemin', function() { 
    return gulp.src(paths.index) 
    .pipe(usemin({ 
     js: [minifyJs(), 'concat'], 
     css: [minifyCss({keepSpecialComments: 0}), 'concat'], 
    })) 
    .pipe(gulp.dest('dist/')); 
}); 

В соответствии

.pipe(usemin({..}) 

просто не использовать эту usemin задачу, и вы должны быть хорошо

+0

Я добавил ваш код сразу после «var paths = ....» изменить исключить: ['src/js /**/*.*'] и я получаю не могу найти модуль 'gulp-minify' , Мой код уже минимизирует файлы - не лучше ли редактировать код, который у меня есть? также, если я добавляю новую задачу под названием «compress», не следует ли добавлять ее к задаче или сборке по умолчанию? –

+0

Там, скорректировав ответ для вас :) – uksz

+0

Спасибо большое! Я перестал использовать его, но теперь похоже, что index.html не обновляется с помощью передовых JS-файлов. Я думаю, что добавление всех из них в index.html решит проблему. Спасибо! –