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

相关文章

来自专栏WindCoder

intellij 出现“Usage of API documented as @since 1.6+”的解决办法

今天玩wafer时,发现代码中出现“Usage of API documented as @since 1.6+”的错误提示。

651
来自专栏月牙寂

swarm源码分析(1)---command流程

第一时间获取文章,可以关注本人公众号 月牙寂道长 yueyajidaozhang

2925
来自专栏静下来

windows 2003 iis服务器设置301重定向

最近在给公司之前的网站做调整,我发现网站没有301重定向。 系统是Windows Server 2003的,IIS6.0服务器。 第一步:首先得有2个站点 ...

2805
来自专栏程序猿DD

Eureka中RetryableClientQuarantineRefreshPercentage参数探秘

作者:李刚 原文:http://www.spring4all.com/article/180 前言 我们知道Eureka分为两部分,Eureka Server和...

5439
来自专栏机器学习从入门到成神

Shell常见命令实践

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sinat_35512245/articl...

493
来自专栏玄魂工作室

Hacker基础之Linux篇:基础Linux命令一

这一部分主要是讲解Linux常用命令工具,比如文件管理,文本处理等等,主要是为了让读者用最少的实践掌握和熟练应用基本的Linux操作,对于每个命令的举例,尽量做...

2767
来自专栏我和未来有约会

有趣 不用js也能创建silverlight

如果你已经安装了silverlight并能在IE7或Firefox 2中运行,请直接复制下边的代码存成.htm来浏览。 <html> <head> </head...

18310
来自专栏Python小屋

Python获取本机所有网卡的MAC地址

在拙作《Python可以这样学》(清华大学出版社,2017.2)第297页介绍了一种获取本机网卡MAC地址的方法,不过代码显得稍微有点啰嗦,并且只能获得一块网卡...

36312
来自专栏地方网络工作室的专栏

Shell 命令行,实现对若干网站状态批量查询是否正常的脚本

Shell 命令行,实现对若干网站状态批量查询是否正常的脚本 如果你有比较多的网站,这些网站的运行状态是否正常则是一件需要关心的事情。但是逐一打开检查那简直是一...

2028
来自专栏微服务生态

Git常用命令速查手册

653

扫码关注云+社区