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

相关文章

来自专栏搞前端的李蚊子

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

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

2939
来自专栏电光石火

重置网卡命令

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

3145
来自专栏机器学习实践二三事

pip安装报错'not a supported wheel on this platform'

这个错误很常见,解决方法是改名,首先要获得在你的机器的平台上的合法名称: import pip pip.pep425tags.get_supporte...

2527
来自专栏游戏杂谈

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

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

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

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

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

3040
来自专栏吴伟祥

基于 CentOS 搭建 FTP 文件服务

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

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

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

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

3595
来自专栏风中追风

集群 跟 分片 有什么区别

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

75716
来自专栏王小雷

React Natvie在Mac os上安装并创建项目

详细记录React-Native 0.47版本在Mac OS 上安装过程并初始化项目。 ? 1. 安装RN环境 1.1 安装brew /usr/bin/ruby...

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

linux编译zlib库的动态库so

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

1081

扫码关注云+社区