zoukankan      html  css  js  c++  java
  • 前端自动化之sass实时编译及自动刷新浏览器

    gulp livereload实现sass实时编译及浏览器自动刷新

    首先gulp是基于Node的,所以确保你已经安装 node.js,在Nodejs官方网站下载跟自己操作系统相对应的安装包。

    先说一下gulp安装流程:

    1:全局安装gulp,操作为: npm install gulp -g;
    2:在根目录下创建 package.json文件,操作为:npm init,之后根据操作输入“名字,版本号,描述”等内容,直接按回车则使用默认值,最后根据提示输入YES即可;输完后根目录下多了个package.json文件;
    3:本地安装gulp,先进入你的项目所在,如d盘下的myproject/app

    d: 进入D盘;
    cd myproject/app 进入myproject下面的app文件夹;

    然后在当前项目根目录下输入:
    npm install --save-dev gulp;

    可以发现我们安装了2次,全局安装gulp是为了执行gulp任务,本地安装gulp则是为了调用gulp插件的功能。

    4.根目录下创建 gulpfile.js,此为配置文件,有关gulp的任务都写在里面,后面再讲。

    至此,gulp的基本安装就已经结束,下面来安装gulp插件,有关的常用插件像代码压缩,图片压缩,重命名等还是比较多的,可以去npm上找,再次就不举例了,本文只用简单介绍自动刷新相关插件,(本想sass实时编译成css再自动刷新的)


    先按照服务器插件:
    livereload需要在服务器上运行,可以先npm install http-server -g;装一个插件,如果你有自己的本地服务器也行;
    如果系统是win10或者8, 可能会出错,退出Node再以管理员的身份打开,重新安装即可;
    安装完然后输入http-server,出现此图片代表启用服务成功;由于启用后就没法进行其他操作了(难道是我的问题?),所以再打开一个 node(反正又不要钱)
    装完后以服务器环境打开文件,默认地址为 http://192.168.0.110:8080 (要找到html文件位置)

    接着安装sass编译插件,npm install --save-dev gulp-ruby-sass (电脑必须已安装Ruby环境,如果没有可以则安装gulp-sass插件,64位系统下安装可能会出错,据我查资料说是2进制的问题,表示一脸懵逼)


    再安装livereload插件:
    npm install gulp gulp-livereload -g

    安装完后cd进入项目所在位置输入livereload


    需要的文件都装好后,就可以来写上面的 gulpfile.js配置文件了;

    //引入插件
    var gulp = require("gulp");
    var livereload = require("gulp-livereload");
    var sass = require("gulp-ruby-sass");

    //执行任务,意思为监听src下的所有文件,发现有变动即刷新浏览器,根据自己的文件目录写监听的位置
    gulp.task("sass", function() {

    return sass("src/sass/*.scss")
    .pipe(gulp.dest("src/css2"))
    .pipe(livereload());
    })


    gulp.task('sasswatch', function() {

    gulp.watch('src/sass/*.scss',["sass"]

    );
    });


    gulp.task('default', function() {

    livereload.listen();
    gulp.watch('src/**/*.*',function(file) {
    livereload.changed(file.path);
    }
    );
    });


    为了让浏览器自动刷新还需要装一个chrome的插件,但由于要翻墙就算了,以下面的方案代替:
    在index.html中引入一下script标签

    <script>
    document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
    ':35729/livereload.js?snipver=1"></' + 'script>')
    </script>


    至此就可以正常搞起,亲测可用。 有双屏的写起来爽很多,只要ctrl+s保存就你懂得!!!!呵呵呵呵。

    gulp.task是gulp的api之一,作用为定义任务,有关其他的api像src watch pipe dest什么的就大家自己研究了。

    研究了3个多小时,大家要是能用了就点个赞。有什么问题可以咨询一下我,我要是懂得就帮你解答一下,不懂得我也没办法,本人也就刚工作一个月的水平,还是比较水的,哪里写错了大家见谅一下。

  • 相关阅读:
    Mybatis一级缓存和二级缓存总结
    UML模型的基本概念
    Proxy patten 代理模式
    UML 基础:类图
    Java与UML交互图
    Composite Pattern (组合模式)
    用例建模指南
    Prototype Pattern(原型模式)
    Adapter Pattern(适配器模式)
    UML 类与类之间的关系
  • 原文地址:https://www.cnblogs.com/zhengrunlin/p/5868159.html
Copyright © 2011-2022 走看看