zoukankan      html  css  js  c++  java
  • 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。

    研究完,在总结呢...

  • 相关阅读:
    (原)在ubuntu 中安装 swi prolog 和 简单的使用
    (转) 新手入门:C/C++中的结构体
    (转) eclipse debug (调试) 学习心得
    flutter: 根视图、根元素与根渲染
    eggjs的参数校验模块egg-validate的使用和进一步定制化升级
    Vue源码中用到的工具函数
    21 项优化 React App 性能的技术
    react-redux 的使用
    编写 Vue.js 组件前需要知道的 10 件事
    Flutter实现抽屉动画效果
  • 原文地址:https://www.cnblogs.com/wpp12345/p/6007643.html
Copyright © 2011-2022 走看看