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。

研究完，在总结呢...