2014-12-01 3 views
2

Моей структуры каталогов что-то вроде:как настроить глоток смотреть

-client/ 
    index.html 
    app.js 
    js/ 
     -controllers/ 
     -directives/ 
    partials/ 
     someHTML.html 
     anotherHTML.html 

    -server 
    server.js 

У меня настроить Gulpfile.js в каталоге клиента. Я не уверен, как настроить задачу просмотра так, чтобы глоток автоматически перестраивал и обновлял мой браузер. Это то, что я пытался из до сих пор:

/*jshint globalstrict: true*/ 
'use strict'; 

var gulp = require('gulp'), 
    browserify = require('gulp-browserify'), 
    clean = require('gulp-clean'), 
    connect = require('gulp-connect'), 
    jshint = require('gulp-jshint'), 
    stylish = require('jshint-stylish'); 


var liveReload = true; 

gulp.task('clean', function() { 
    return gulp.src(['./dist'], { 
      read: false 
     }) 
     .pipe(clean()); 
}); 

gulp.task('browserify', ['lint'], function() { 
    // Single entry point to browserify 
    gulp.src('app.js') 
     .pipe(browserify({ 
      insertGlobals: true, 
      debug: true 
     })) 
     .pipe(gulp.dest('./dest')); 
}); 

gulp.task('lint', function() { 
    return gulp.src(['gulpfile.js', 
    'app.js', 
    'controllers/*.js', 
    'directives/*.js' 
]) 
     .pipe(jshint()) 
     .pipe(jshint.reporter(stylish)); 
}); 

gulp.task('connect', function() { 
    connect.server({ 
     root: '.', 
     livereload: true 
    }); 
}); 

gulp.task('html', function() { 
    gulp.src(['./**/*.html', '!./node_modules/**']) 
     .pipe(connect.reload()); 
}); 

gulp.task('watch', function() { 
    gulp.watch(['./**/*.js', '!./node_modules/**'], ['html']); 
}); 


gulp.task('default', ['clean', 'connect', 'watch'], function() { 
    var liveReload = false; 
    gulp.start('browserify'); 
}); 
+1

Можете ли вы опубликовать весь файл gulpfile? –

+0

от https://github.com/gulpjs/gulp/issues/426 'gulp.start недокументирован специально, потому что это может привести к сложным файлам сборки, и мы не хотим, чтобы люди использовали его' – havenchyk

+0

спасибо за указатель baxxabit – runtimeZero

ответ

1

Эти ссылки ниже помогли мне понять ответ:

Gulp Watch and Nodemon conflict
https://github.com/gulpjs/gulp/

Для тех, кто интересуется: ниже моя gulpfile

/*jshint globalstrict: true*/ 
'use strict'; 

var gulp = require('gulp'), 
    browserify = require('gulp-browserify'), 
    clean = require('gulp-clean'), 
    jshint = require('gulp-jshint'), 
    stylish = require('jshint-stylish'), 
    stylus = require('gulp-stylus'), 
    del = require('del'), 
    nodemon = require('gulp-nodemon'), 
    concat = require('gulp-concat'); 

var paths = { 
    client: { 
    scripts: 'client/js/**/*.js', 
    html: ['client/partials/*.html', 'client/*.html'], 
    css: 'client/css/*.styl' 
    }, 
    server: { 
    scripts: 'server/js/**/*.js' 
    } 

}; 

// Rerun the task when a file changes 
gulp.task('watch', function() { 
    gulp.watch(paths.client.css, ['stylus']); 
    gulp.watch(paths.client.scripts, ['clientLint', 'browserify']); 
    gulp.watch(paths.client.html, ['copyClientPartials', 'copyClientIndex']); 
    gulp.watch(paths.server.scripts, ['serverLint']); 
}); 


gulp.task('demon', function() { 
    nodemon({ 
    script: 'server/js/server.js', 
    ext: 'js', 
    env: { 
     'NODE_ENV': 'development' 
    } 
    }) 
    .on('start', ['watch']) 
    .on('change', ['watch']) 
    .on('restart', function() { 
     console.log('restarted!'); 
    }); 
}); 

// Default Task 
gulp.task('default', ['demon']); 


/********** Building CSS *********/ 
gulp.task('stylus', function() { 

    del(['client/build/css/*']); 

    gulp.src('client/css/*.styl') 
    .pipe(stylus()) 
    .pipe(concat('all.css')) 
    .pipe(gulp.dest('client/build/css/')); 
}); 


gulp.task('clientLint', function() { 
    return gulp.src([path.client.scripts]) 
    .pipe(jshint()) 
    .pipe(jshint.reporter(stylish)); 
}); 


gulp.task('serverLint', function() { 
    return gulp.src([path.server.scripts]) 
    .pipe(jshint()) 
    .pipe(jshint.reporter(stylish)); 
}); 


gulp.task('browserify', function() { 

    del(['client/build/js/*']); 

    gulp.src('client/js/app.js') 
    .pipe(browserify({ 
     insertGlobals: true, 
     debug: true 
    })) 
    .pipe(gulp.dest('client/build/js')); 
}); 

/********** copy HTML **********/ 

gulp.task('copyClientPartials', function() { 
    del(['client/build/partials/*']); 

    gulp.src(['client/partials/*.html']) 
    .pipe(gulp.dest('client/build/partials')); 
}); 

gulp.task('copyClientIndex', function() { 
    del(['client/build/index.html']); 
    gulp.src(['client/index.html']) 
    .pipe(gulp.dest('client/build')); 
}); 
Смежные вопросы