使用gulp实现自动刷新浏览器

gulp是基于流的自动化工具,关键字:自动.

我也是非常喜欢自动的东西,尤其能帮我省下好多时间,提高效率,更重要的是能提高B格;

下面就来看看如何创建;

1.cnpm init  初始化项目

2.cnpm install gulp 安装gulp  并用gulp -v查看版本号

3.cnpm install 安装所需要的依赖包 

cnpm install gulp-connect --save-dev

cnpm install gulp-concat --save-dev

cnpm install gulp-rename --save-dev

cnpm install gulp-uglify --save-dev

也可以到本人的码云上下载package.json

执行cnpm install就可以了;

4.在根目录下创建gulpfile.js文件;

写入以下 代码

var gulp =require('gulp');
var connect = require('gulp-connect');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var rename = require("gulp-rename");


var jsSrc='./js/*.js';
var jsDist= './dist/js';
var htmlSrc='./*.html';
var htmlDist='./dist';
var cssSrc='./css/*.css';
var cssDist='./dist/css';


gulp.task('js',function(){
   gulp.src(jsSrc)
       .pipe(concat('index.js'))
       .pipe(gulp.dest(jsDist))
       .pipe(rename({suffix:'.min'}))
       .pipe(uglify())
       .pipe(gulp.dest(jsDist))
       .pipe(connect.reload())
});

gulp.task('html',function(){
    console.log("调用html了");
    gulp.src(htmlSrc)
        .pipe(gulp.dest(htmlDist))
        .pipe(connect.reload())
});

gulp.task('css',function(){
    console.log("调用css了");
    gulp.src(cssSrc)
        .pipe(concat('index.css'))
        .pipe(gulp.dest(cssDist))
        .pipe(rename({suffix:'.min'}))
        .pipe(gulp.dest(cssDist))
        .pipe(connect.reload())
});

gulp.task('connect', function() {
    connect.server({
        livereload: true,
        port:8182
    });
});

gulp.task('watch',function(){
    gulp.watch('./*.html',['html']);
    gulp.watch('./css/*.css',['css']);
    gulp.watch('./js/*.js',['js'])
});


gulp.task('default',['js','html','connect','watch','css']);

可以到本人的开源项目中:http://git.oschina.net/kaykie/zidong 下载并安装

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Golang语言--反射的用处--代码自动生成

背景: go语言处理db、json的时候,具体代码的变量定义和db字段、json输出的时候可能不一样。 这个时候,我们需要用tag的方式来进行定义。 例如: ?...

4276
来自专栏hbbliyong

IDEA更换主题

更换IDEA主题只需要3步 1. 下载主题 在主题网站上IDEA Color Themes 上浏览喜欢的主题并下载该主题。(如果网址有变更,google IDE...

5789
来自专栏风中追风

集群 跟 分片 有什么区别

而 redis  这样的 “集群” 强调的是  数据 ,(因为redis 主要是来存数据的嘛)

91516
来自专栏从零学习云计算

openshift/origin学习记录(11)——赋予用户集群管理员权限

由于system:admin默认没有密码,没法登录web console,这里通过指令给账号dev赋予集群管理员权限。 # oc login -u sys...

3320
来自专栏游戏杂谈

flex请求http://localhost:37813/crossdomain.xml

造成请求localhost:37813/crossdomain.xml,是因为开发时启用了网络监视器,如下图:

1191
来自专栏深度学习之tensorflow实战篇

python生成exe,环境win10简单的小程序案例

1.直接pip安装:pip install pyinstaller ? 2.打包时,在命令行中切换到要打包的程序所在目录,直接输入下面的指令即可。 ...

3935
来自专栏前端知识分享

SVN版本管理工具的使用

https://tortoisesvn.net/downloads.html 下载网站

2343
来自专栏黑白安全

mysql利用log写入webshell(测试版本5.5.53)

新版本的mysql在my.ini中设置了导出文件的路径,无法再使用select into outfile来写入一句话

2882
来自专栏电光石火

重置网卡命令

前几天有人问我网络被篡改了怎么办? 我在这里分享一下重置网卡命令 1开始→运行→输入:CMD 点击确定(或按回车键),打开命令提示符窗口。 ...

5115
来自专栏林德熙的博客

WPF 开发自动删除软件

我在写一个测试的工具,需要在用户的电脑使用,但是需要在运行之后 3 天内删除。这个功能是因为我是金鱼但是自己忘记删除了,但是可能需要多次使用,所以就需要让软件自...

1161

扫码关注云+社区

领取腾讯云代金券