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。

研究完，在總結呢...