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

  });

});

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']);

});

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

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

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

    });

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

研究完，在总结呢...

巴特西

gulp LiveReload middleware

最新文章

热门文章