gulp LiveReload middleware

用yo搭建的angular项目，用gulp自动化构建。

自动化构建主要的功能大致有：

1. 文件压缩

2. 文件重命名

3. 文件合并

4. css，js文件自动引入到html

5. 自动刷新

.......

在用gulp过程中出现的问题,一下是我的项目结构

1. 在搭建项目的时候，我想使用sass, 可是由于gulp-sass的lfs 服务，我们无法访问，所以安装失败。网上有很多解决的办法。但是我都没有成功，然后我就想先放弃，先打一个可以用的项目再说。

2. 后面的都一帆风顺。项目可以使用。然后我开始尝试使用gulp的一些功能。首先文件压缩和重命名是没有问题的。但是bower.json里面的包并没有自动引入index.html

3. 对比grunt.js，在gulp.task('start:server',...)加入代码middleware（虽然我现在说的很easy,但其实和同事研究了很久）

gulp.task('start:server', function() {
  $.connect.server({
    root: [yeoman.app, '.tmp'],
    livereload: true,
    middleware: function (connect) {
      return [
        connect.static('.tmp'),
        connect().use(
          '/bower_components',
          connect.static('./bower_components')
        ),
        connect().use(
          '/app/styles',
          connect.static('./app/styles')
        ),
        connect.static(yeoman.app)
      ];
    },
    // Change this to '0.0.0.0' to access the server from outside.
    port: 9000
  });
});

View Code

4. 然后是更改html,js,css，页面自动刷新，这个更坑。

yo初始化的gulp.js是这样写的，

gulp.task('watch', function () {
    $.watch(paths.styles)
    .pipe($.plumber())
    .pipe(styles())
    .pipe($.connect.reload());

  $.watch(paths.views.files)
    .pipe($.plumber())
    .pipe($.connect.reload());

  $.watch(paths.scripts)
    .pipe($.plumber())
    .pipe(lintScripts())
    .pipe($.connect.reload());

  $.watch(paths.test)
    .pipe($.plumber())
    .pipe(lintScripts());

  gulp.watch('bower.json', ['bower']);
});

View Code

但并没有作用，查看grunt和Internet，好像要使用livereload，于是在‘watch’的task里试用一下方法，起作用了。

gulp.watch(yeoman.app+'/{,**/}*.html',function(){
      livereload.changed(yeoman.app+'/{,**/}*.html');
    });

此时我已身心必备，突然同事发现了一个好东西，那就是BrowerSync。

研究完，在总结呢...