browser-sync gulp配置

Browsersync 是一个前端调试的利器,它能够让你在页面文件改动之后自动刷新浏览器,从而方便了前端的调试工作。

本文就是对于 Browsersync + Gulp 的配置作个简单的笔记。

因为使用Gulp的话,相比起来使用Browser-sync自带的命令行简单点。而且有更多的选择。

首先安装 Browsersync 与 Gulp:

$ npm install browser-sync gulp --save-dev

gulpfile.JS 中创建新任务:

文件都放在APP中。

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

var config = {
  baseDir: 'app',
  watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}

gulp.task('server', function() {
  browserSync.init({
    files: config.watchFiles,
    server: {
      baseDir: config.baseDir
    }
  });
})
gulp.task('default',['server']); //定义默认任务

这里表示以 app 目录作为根目录启动 HTTP 服务,并监听 app 目录下的所有 htmlcss 以及 js 类型的文件,当这些文件有改动时 Browsersync 会自动刷新浏览器页面。

如果想配合使用 SASS 之类的,可以参考: https://www.browsersync.io/docs/gulp/

需要监听任务只需要打开命令行,输入gulp即可。

实践了一番:使用SASS和JS压缩命令行。

// var browserify = require('browserify');  
var gulp = require('gulp');
var browserify = require('gulp-browserify');
var uglify = require('gulp-uglify');  
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');
var reload      = browserSync.reload;

var config = {
  baseDir: 'app',
  watchFiles: [ 'app/*.html', 'app/css/*.css', 'app/js/*.js' ]
}

gulp.task('server',['sass'], function() {
  browserSync.init({
    files: config.watchFiles,
    server: {
      baseDir: config.baseDir
    }
  });
  gulp.watch("app/scss/*.scss", ['sass']);
  gulp.watch("app/script/*.js", ['js-watch']);
  gulp.watch("app/*.html").on('change', reload);
})
// scss编译后的css将注入到浏览器里实现更新
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(reload({stream: true}));
});
// 处理完JS文件后返回流
gulp.task('js', function () {
    return gulp.src('app/script/*.js')
        .pipe(browserify())
        .pipe(uglify())
        .pipe(gulp.dest('app/js'));
});

// 创建一个任务确保JS任务完成之前能够继续响应
// 浏览器重载
gulp.task('js-watch', ['js'], browserSync.reload);
gulp.task('default',['server']); //定义默认任务

package.JSON如下:

{
  "name": "gulp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "browser-sync": "~2.12.9"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.1",
    "gulp-uglify": "^1.5.3",
    "gulp-browserify": "^0.5.1"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "caibaojian",
  "license": "ISC"
}

有需要可以拿去用一下,后面考虑加入图片压缩等。

目录结构
gulp

目录可能存在着一些不合理的地方。也许要把编译和开发文件单独分出来放在同一个文件里面。

原文链接:browser-sync gulp配置 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/browsersync-gulp.html)

发表评论

请登录后发表评论: