Последовательность задач просмотра Gulp и синхронизация браузера

Я новичок в использовании Gulp, просто пытаюсь изучить его ... Теперь проблема, которую я получаю и хочу спросить, - это способ настроить задачу по умолчанию с включенной синхронизацией часов и браузера. Мне нужно знать, делаю ли я что-то неправильно

Может ли кто-нибудь улучшить мой код здесь, я не понимаю взаимосвязь часов и синхронизации браузера, какие задачи запускать перед синхронизацией браузера и когда смотреть

Ниже моя структура папок

структура моей папки для проекта gulp

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var	uglify = require('gulp-uglify');
var less = require('gulp-less');
var plumber= require('gulp-plumber');
var cssmin = require('gulp-cssmin');
var rename = require('gulp-rename');
var htmlmin = require('gulp-htmlmin');
var imagemin = require ('gulp-imagemin');

//scripts task
//uglifies
gulp.task('scripts', function(){
gulp.src('js/*.js')
	.pipe(plumber())
	.pipe(uglify())
	.pipe(gulp.dest('build/js'));
});


//compress images
gulp.task('imagemin', function(){
        gulp.src('img/**/*.+(png|jpg|gif|svg)')
        .pipe(cache(imagemin({
      interlaced: true
    })))
        .pipe(gulp.dest('build/img'));
});

//CSS styles
gulp.task('less', function(){
 gulp.src('less/style.less')
 .pipe(plumber())
 .pipe(less())
 .pipe(gulp.dest('build/css'));
 
});

gulp.task('cssmin', function(){
gulp.src('build/css/style.css')
		.pipe(plumber())
		.pipe(cssmin())
		.pipe(rename({suffix: '.min'}))
		.pipe(gulp.dest('build/css'))
		.pipe(reload({stream:true})); // inject into browsers

});

gulp.task('htmlmin', function(){
  return gulp.src('*.html')
    .pipe(htmlmin({removeComments: true}))
    .pipe(gulp.dest('build'))
    .pipe(reload({stream:true})); // inject into browsers
});



// Browser-sync task, only cares about compiled CSS
gulp.task('browser-sync', function() {
    browserSync(['css/*.css', 'js/*.js','less/*.less', 'images/*'],{
        server: {
            baseDir: "./"
        }
    });
});



/* Watch scss, js and html files, doing different things with each. */
gulp.task('default', ['browser-sync' , 'scripts', 'less', 'cssmin', 'htmlmin', 'imagemin'], function () {
    /* Watch scss, run the sass task on change. */
    gulp.watch(['less/**/*.less'], ['less'])
    //Watch css min
    gulp.watch(['build/css/*.css'], ['cssmin'])
    /* Watch app.js file, run the scripts task on change. */
    gulp.watch(['js/*.js'], ['scripts'])
    /* Watch .html files, run the bs-reload task on change. */
    gulp.watch(['*.html'], ['htmlmin']);



     // gulp.watch('app/*.html', browser-sync.reload); 
    // gulp.watch('app/js/**/*.js', browser-sync.reload); 
});

Теперь процесс, который мне нужен

  1. Скомпилируйте меньше в css, а затем уменьшите его, чтобы создать папку
  2. Пункт списка
  3. Затем уменьшите мой HTML-код
  4. Затем уменьшите и объедините мои js
  5. Сжать все изображения (запускать только при изменении некоторых изображений)
  6. Запустите минимизированный HTML с синхронизацией браузера и наблюдайте за изменениями во всех моих исходных HTML, Less, изображениях и JS.

gulp gulp-watch gulp-uglify gulp-less
person Muhammad Ahsan    schedule 01.01.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я бы не стал беспокоиться о минимизации на этом этапе, если ваша цель — работать в режиме разработки, это относится к imagemin (я бы все равно сделал это в автономном режиме), cssmin, htmlmin и вашей задаче js, которая по умолчанию запускает uglify. В идеале вы хотели бы отлаживать в браузере, и минимизация кода вам не сильно поможет. Если вы добавите задачу dist для выполнения шага минимизации.

Я понимаю, что вам нужен Less для CSS по очевидным причинам. Итак, вы ищете что-то вроде этого:

var gulp = require('gulp');
var plumber = require('gulp-plumber');
var browserSync = require('browser-sync').create();
var sass = require('gulp-less');

// Static Server + watching less/html files
gulp.task('serve', ['less'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("less/*.less", ['less']);
    gulp.watch("*.html").on('change', browserSync.reload);
});

gulp.task('less', function(){
  gulp.src('less/style.less')
  .pipe(plumber())
  .pipe(less())
  .pipe(gulp.dest('build/css'))
  .pipe(browserSync.stream());

});

gulp.task('default', ['serve']);

Этот код вызывает serve в качестве основной задачи. Задача Serve имеет зависимость less (которая будет вызываться первой). Затем, наконец, вызывается обратный вызов. Инициализируется BrowserSync и добавляются часы как для файлов html, так и для файлов меньшего размера.

Посетите эту страницу, если хотите узнать больше об интеграции gulp + browsersync.

person Alan Souza    schedule 02.01.2016
comment
Большое спасибо @alan-souza: Поэтому я должен сделать отдельную задачу для минимизации, когда я закончу разработку .... Это отличный совет ... Еще раз миллион благодарностей. - person Muhammad Ahsan; 02.01.2016