安装依赖

1
2
npm init //初始化 项目
npm install --save-dev browser-sync gulp //安装必要依赖

然后，考虑拥有如下的目录结构…

1
2
3
4
5
6
7
gulpfile.js
app/
    styles/
        main.css
    scripts/
        main.js
index.html

通过如下的 gulpfile.js，你可以轻松地将 app 目录中的文件加到服务器中，并且所有的浏览器都会在文件发生改变之后自动刷新：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// 监视文件改动并重新载入
gulp.task('serve', function() {
browserSync({
    server: {
    baseDir: 'app'
    }
});

gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'],
{cwd: 'app'}, reload);
});

在 index.html 中引入 CSS：

1
2
3
4
5
<html>
<head>
    ...
    <link rel="stylesheet" href="styles/main.css">
    ...

  • 通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)：

    1
    gulp serve

  • CSS 预处理器
    一个常见的使用案例是当 CSS 文件文件预处理之后重载它们。以 sass 为例，这便是你如何指示浏览器无需刷新整个页面而只是重载 CSS，考虑有如下的文件目录结构。

    1
    2
    3
    4
    5
    6
    7
    gulpfile.js
    app/
        scss/
            main.scss
        scripts/
            main.js
        index.html

安装依赖

1
npm install --save-dev gulp-sass //安装必要依赖

通过如下的 gulpfile.js，你可以轻松地监视 scss 目录中的文件，并且所有的浏览器都会在文件发生改变之后自动刷新：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
// scss 编译
gulp.task('sass', function() {
    return gulp.src('app/scss/**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('app/css'))
    .pipe(reload({ stream:true }));
});
// 监视文件改动并重新载入
gulp.task('browser-sync',['sass'], function() {
    browserSync({
        server: {
        baseDir: 'app'
        }
    });
    // 监听改动后 务必 执行事件
    gulp.watch(['*.html', 'css/**/*.css', 'scripts/**/*.js'],
    {cwd: 'app'}, reload);
    gulp.watch(['scss/**/*.scss'], {cwd: 'app'}, ['sass'], reload);
});
// 执行 gulp 默认事件
gulp.task('default', ['browser-sync']);

通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)：

1
gulp

亦或者 你想加入 Es6 =》 Es5 ？

1
2
3
4
5
6
7
8
9
10
11
12
npm install --save-dev gulp-babel babel-preset-es2015 //安装必要依赖
var babel = require('gulp-babel');

gulp.task('babel', function () {
gulp.src('app/scripts/*.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('app/js'))
    .pipe(reload({ stream:true }));
});
gulp.watch(['scripts/**/*.js'], {cwd: 'app'}, ['babel'], reload);