使用gulp-connect

Question

我是gulp的新手。我正在使用角度js创建应用程序。我已经在我的项目中集成了gulp。我想在我的应用程序中集成实时重新加载。我在互联网上搜索有关实时重新加载，但找不到解决方案。我也使用npm成功安装了live-reload。但是我不知道如何在gulp文件中使用live reload。这是我的gulp文件：

/*=============Minify html==============*/
var gulp = require('gulp'); 

// include plug-ins
var changed = require('gulp-changed');
var minifyHTML = require('gulp-minify-html');
var 
// minify new or changed HTML pages
gulp.task('minify-html', function() {
 var opts = {empty:true, quotes:true};
 var htmlPath = {htmlSrc:'./app/templates/*.html', htmlDest:'./appbuild/views'};

  return gulp.src(htmlPath.htmlSrc)
    .pipe(changed(htmlPath.htmlDest))
    .pipe(minifyHTML(opts))
    .pipe(gulp.dest(htmlPath.htmlDest));
});
/*=============Minify html==============*/


/*=============Minify CSs==============*/
var concat = require('gulp-concat');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var rename = require('gulp-rename');

// CSS concat, auto prefix, minify, then rename output file
gulp.task('minify-css', function() {
var cssPath = {cssSrc:['./app/css/*.css', '!*.min.css', '!/**/*.min.css'], cssDest:'./contentbuild/css/'};

  return gulp.src(cssPath.cssSrc)
    .pipe(concat('styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(cssPath.cssDest));
});
/*=============Minify CSs==============*/

/*=============Minify JS==============*/
var stripDebug = require('gulp-strip-debug');
var uglify = require('gulp-uglify');

// JS concat, strip debugging code and minify
gulp.task('bundle-scripts', function() {
var jsPath = {jsSrc:['./app/js/*.js','./app/**/*.js'], jsDest:'./appbuild'};
  gulp.src(jsPath.jsSrc)
    .pipe(concat('ngscripts.js'))
    .pipe(stripDebug())
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest(jsPath.jsDest));
});

/*=============Minify CSs==============*/
// default gulp task
gulp.task('default', ['minify-html', 'bundle-scripts', 'minify-css'], function() {
  // watch for HTML changes
  gulp.watch('./app/templates/*.html', ['minify-html']);
  // watch for JS changes
  gulp.watch('./app/js/**/*.js', ['bundle-scripts']);
  // watch for CSS changes
  gulp.watch('./app/css/*.css', ['minify-css']);
});

请帮忙。

Answer 1

使用gulp-connect

进行Livereload

我更喜欢gulp-connect来执行此任务。请参阅必要的修改以在默认任务中启用livereload：

/*=============Minify html==============*/
var gulp = require('gulp'); 
var connect = require('gulp-connect');
…
gulp.task('minify-html', function() {
  …
  return gulp.src(htmlPath.htmlSrc)
    …
    .pipe(connect.reload());
});
/*=============Minify html==============*/


/*=============Minify CSs==============*/
…
gulp.task('minify-css', function() {
  …
  return gulp.src(cssPath.cssSrc)
    …
    .pipe(connect.reload());
});
/*=============Minify CSs==============*/

/*=============Minify JS==============*/
…
gulp.task('bundle-scripts', function() {
…
  gulp.src(jsPath.jsSrc)
    …
    .pipe(connect.reload());
});

/*=============Livereload==============*/
gulp.task('connect', function() {
    connect.server({
        port: 8001,
        livereload: true
    });
});

/*=============Minify CSs==============*/
gulp.task('default', ['minify-html', 'bundle-scripts', 'minify-css', 'connect'], function() {
  …
});

使用gulp实时重新加载

1 个答案:

使用gulp-connect