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。

    研究完,在总结呢...

  • 相关阅读:
    vue router replace
    html transition 标签
    transformorigin
    动态设置class名称
    oracle中trim,ltrim,rtrim函数用法
    blob字段存储文件并读取
    分区表的本地索引竟然失效了——ORA01502
    powerdesigner使用细节
    PLS00231错误:function name may not be used in SQL
    sqlplus命令说明
  • 原文地址:https://www.cnblogs.com/wpp12345/p/6007643.html
Copyright © 2011-2022 走看看