Gulp+browser-sync打造前端开发自动刷新

以下是gulpfile.js:

var gulp = require(‘gulp‘),
    config = require(‘./config‘),
    cleanCss = require(‘gulp-clean-css‘),
    jshint = require(‘gulp-jshint‘),
    uglify = require(‘gulp-uglify‘),
    rename = require(‘gulp-rename‘),
    concat = require(‘gulp-concat‘),
    browserify = require(‘gulp-browserify‘),
    nodemon = require(‘gulp-nodemon‘),
    sourcemaps = require(‘gulp-sourcemaps‘),
    del = require(‘del‘),
    sass = require(‘gulp-sass‘),
    replace = require(‘gulp-replace‘),
    browserSync = require(‘browser-sync‘).create();

gulp.task(‘sass‘, function () {
    return gulp.src(‘client/sass/main.scss‘)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(‘client/sass/sass2css‘))
        .pipe(rename({suffix: ‘.min‘}))
        .pipe(cleanCss())
        .pipe(gulp.dest(‘client/css/export‘))
        .pipe(browserSync.reload({stream: true}));
});

gulp.task(‘clean‘, function (callback) {
    del([‘client/css/export/*.min.css‘], callback);
});

gulp.task(‘watch‘, function () {
    browserSync.init({
        proxy: ‘localhost:‘ + config.listenPort
    });

    gulp.watch(‘client/sass/main.scss‘, [‘sass‘]);
    gulp.watch(‘views/pages/*.jade‘, browserSync.reload);
});

gulp.task(‘serve‘, function () {
    return nodemon({
        script: ‘app.js‘,
        ignore: [
            "client/**",
            "views/**"
        ]
    });
});

gulp.task(‘develop‘, [‘watch‘, ‘serve‘]);

有了这个,开发就很有乐趣了。参考:http://www.browsersync.cn/docs/gulp/

时间: 2024-10-12 03:55:42

Gulp+browser-sync打造前端开发自动刷新的相关文章

gulp+browserSync+nodemon 实现express 全端自动刷新的实践

学习过程宝宝心里苦,不能怨政府.. 兴趣所致,一直放不下nodejs的学习,时隔多日,又把express捡起来打算重新再学学,一直没什么太大的长进,和实际的项目经验.真的醉了,太懒了. 今天在重新研究supervisor的时候,突然觉得这东西只有在服务端文件修改时才会触发刷新,前端样式文件模板等等刷新时不会, 能实现前端修改也自动刷新不?想想平时自己用gulp 搭虚拟服务器,用browser自动刷新,于是打算试试. gulp+browserSync 算是原来就有的,现在应该把目标分几步来实现,

Chrome 实现前端页面自动刷新

作为一个前端,主要是写页面,但是每次写完一段代码,保存,如果想看看刚刚写的代码的效果怎样,还需要到浏览器手动刷新,刷新,刷新,刷的手疼了. 所以如果能实现只要在编辑器中保存,浏览器自动刷新页面,那岂不是很棒嘛!!So convenient~~ 所以本文介绍如何实现浏览器自动刷新. 1.需要安装: livereload,Chrome 安装这个扩展程序 然后,window 用户需要还需要下载安装个客户端, http://livereload.com/ 最后,使用 npm 全局安装 http-serv

利用Browser Link提高前端开发的生产力

(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:Browser Link是VS 2013开始引入的一个强大功能,让前端代码(比如AngularJS的代码)在VS中的修改更加轻而易举. 前端代码是运行在浏览器中,而Visual Studio通常只会和服务端代码交互.微软通过Browser Link技术在VS和浏览器之间架起了一个桥梁.这一技术是基于SignalR来实现的,虽然感觉把他们连接起来没有什么大不了的.但是,当你无数次在浏览器上按F1

php微信开发-自动刷新accesstoken

用了如下2个方法来实现 1 <?php 2 public function http_curl($url,$type='get',$res='json',$arr='')//接口调用函数 3 { 4 /* 5 *$cur 接口url string 6 *$type 请求类型 string 7 $res 返回数据类型 string 8 $arr post请求参数 string 9 */ 10 //1.初始化curl 11 $ch=curl_init(); 12 //2.设置curl的参数 13 /

前端开发 ---浏览器自动刷新

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Helvetica; color: #000000; min-height: 13.0px } span.s1 { } span.Apple-tab-span { white-space: pre } 1.livereload (1

使用Gulp实现网页自动刷新:gulp-connect

入门指南 1. 全局安装 gulp: npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default', function() { // 将你的默认的任务代码放在这 }); 4. 运行 gulp: gulp 默认的名为 defa

gulp最佳实践(包含js,css,html预编译,合并,压缩,浏览器自动刷新)

gulp是基于流的自动化构建工具官方网址:http://www.gulpjs.com.cn/ 一.安装需要的模块 1.新建package.json,输入下面的内容 { "name": "autopractice", "version": "1.0.0", "description": "", "main": "index.js", "sc

gulp+browserSync自动刷新页面

BrowserSync "Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.您可以想象一下:"假设您的桌子上有pc.ipad.iphone.android等设备,同时打开了您需要调试的页面,当您使用browsersync后,您的任何一次代码保存,以上的设备都会同时显示您的改动".无论您是前端还是后端工程师,使用它将提高您30%的

Browsersync结合gulp和nodemon实现express全栈自动刷新

Browsersync能让浏览器实时.快速响应你的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试.你的任何一次代码保存,以上的设备都会同时显示你的改动". Browsersync可以单独使用,也可以集成到gulp和grunt这样的构建工具中使用,在node.js项目中还能结合gulp-nodemon实现全栈的自动刷新,而在移动端设备上同步调试的功能对移动web开发显然是很有帮助的. 相关网站查看