gulpLiveReloadmiddleware

用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。

研究完，在总结呢...

 

转载于:https://www.cnblogs.com/wpp12345/p/6007643.html

相关资源：JAVA上百实例源码以及开源项目