使用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 条评论
登录 后参与评论

相关文章

来自专栏码农二狗

为nginx日志加入上游响应时间

1234
来自专栏搞前端的李蚊子

超简单的批量创建文件夹方法

1.首先新建一个txt文档 ? 2.在文档里以md开头(md是命令行创建文件夹命令mkdir的缩写) ,后面跟你想要创建的文件夹名称 ? 3.点击另存为选择将保...

2769
来自专栏吴伟祥

基于 CentOS 搭建 FTP 文件服务

此时,访问 ftp://<您的 CVM IP 地址> 可浏览机器上的 /var/ftp 目录了。

1993
来自专栏游戏杂谈

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

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

511
来自专栏帘卷西风的专栏

linux编译zlib库的动态库so

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog) 

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

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

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

2830
来自专栏风中追风

集群 跟 分片 有什么区别

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

58916
来自专栏Golang语言社区

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

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

3896
来自专栏黑白安全

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

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

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

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

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

3445

扫码关注云+社区