gulp + browserify ES6环境搭建

gulp 环境安装

  • 安装全局gulp(已经安装可以跳过)
1
2
cnpm install gulp -g
cnpm i gulp -g
  • 初始化项目(cd 项目文件夹)
1
2
cnpm init
cnpm init -y (后面加上-y 可以跳过配置，后续可以在编辑器里修改文件)
  • 发现多了一个package.json,类似下面的内容
1
2
3
4
5
6
7
8
9
10
11
12
{
  "name": "gulp-new",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}
  • 安装需要的依赖(需要用到的插件)
1
2
3
cnpm install --save-dev gulp gulp-less gulp-minify-css gulp-uglify gulp-rename gulp-connect gulp-concat

cnpm i -D gulp
  • 新建一个资源文件比如’src’,在里面放入文件
/src index.html
/less /js
board.less board.js

  • 根目录下新建gulpfile.js文件

  • 书写gulp task

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var gulp = require('gulp');
var less = require('gulp-less');
var minifycss = require('gulp-minify-css');
var concat = require('gulp-concat');
var rename = require('gulp-rename');
var connect = require('gulp-connect');

//less文件编译
gulp.task('less2css', function() {
  return gulp.src('src/less/*.less')
            .pipe(less())
            .pipe(gulp.dest('src/css'))
});

//css文件合并压缩导出
gulp.task('css', function() {
  return gulp.src('src/css/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dest/css'))
            .pipe(rename({ suffix: '.min' }))
            .pipe(minifycss())
            .pipe(gulp.dest('dest/css'))
            .pipe(connect.reload());
})

//检测文件变化
gulp.task('watch', function() {
  gulp.watch('src/less/*.less', ['less2css', 'css']);
});

//本地服务器,这里使用的是 gulp-connect
gulp.task('webserver', function() {
  connect.server({
    livereload: true,
    port: 8000
  });  
})

gulp.task('default', ['less2css', 'css', 'watch', 'webserver']);

命令行gulp 跑一下default任务，在./src/dest/css 下会生成main.css ,main.min.css文件。

这一部分的问题：

1、任务是并行的，导致编译less之前，main.css已经压缩完

解决办法

1、通过插件 gulp-sequence 整理运行顺序

2、官方做法

https://www.gulpjs.com.cn/docs/api/

对于这个例子，让我们先假定你有两个 task，”one” 和 “two”，并且你希望它们按照这个顺序执行：

1、在 “one” 中，你加入一个提示，来告知什么时候它会完成：可以再完成时候返回一个 callback，或者返回一个 promise 或 stream，这样系统会去等待它完成。

2、在 “two” 中，你需要添加一个提示来告诉系统它需要依赖第一个 task 完成。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var gulp = require('gulp');

// 返回一个 callback，因此系统可以知道它什么时候完成
gulp.task('one', function(cb) {
    // 做一些事 -- 异步的或者其他的
    cb(err); // 如果 err 不是 null 或 undefined，则会停止执行，且注意，这样代表执行失败了
});

// 定义一个所依赖的 task 必须在这个 task 执行之前完成
gulp.task('two', ['one'], function() {
    // 'one' 完成后
});

gulp.task('default', ['one', 'two']);

browserify 打包es6环境

  • 安装依赖
1
cnpm install --save-dev vinyl-source-stream vinyl-buffer browserify gulp-connect gulp-concat babelify babel-preset-es2015
  • 改写pacakge.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"devDependencies": {
    ...
  },
  "babel": {
    "presets": [
      "es2015"
    ]
  },
  "browserify": {
    "transform": [
      [
        "babelify",
        {
          "presets": [
            "es2015"
          ]
        }
      ]
    ]
  }

  • 改写gulpfile.babel.js, 可以写es6语法了,js 被编译到 ./dest/js/app.js ./dest/js/app.min.js
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import gulp from 'gulp';
import uglify from 'gulp-uglify';
import less from 'gulp-less';
import minifycss from 'gulp-minify-css';
import concat from 'gulp-concat';
import rename from 'gulp-rename';
import browserify from 'browserify';
import source from 'vinyl-source-stream';  
import buffer from 'vinyl-buffer'; 
import connect from 'gulp-connect';

gulp.task('convertJS', function() {
  return  browserify({
            entries: ['src/js/board.js'] 
          })
          .bundle()
          .pipe(source('app.js'))
          .pipe(buffer())
          .pipe(gulp.dest('dest/js'))
          .pipe(uglify())
          .pipe(rename({ suffix: '.min' }))
          .pipe(gulp.dest('dest/js'))
          .pipe(connect.reload());
});

gulp.task('less2css', function() {
  return gulp.src('src/less/*.less')
            .pipe(less())
            .pipe(gulp.dest('src/css'))
});

gulp.task('css', function() {
  return gulp.src('src/css/*.css')
            .pipe(concat('main.css'))
            .pipe(gulp.dest('dest/css'))
            .pipe(rename({ suffix: '.min' }))
            .pipe(minifycss())
            .pipe(gulp.dest('dest/css'))
            .pipe(connect.reload());
})


gulp.task('watch', function() {
  gulp.watch('src/js/*.js', ['convertJS']);
  gulp.watch('src/less/*.less', ['less2css', 'css']);
});

gulp.task('webserver', function() {
  connect.server({
    livereload: true,
    port: 8000
  });  
})

gulp.task('default', ['convertJS', 'less2css', 'css', 'watch', 'webserver']);

注意点

1、gulp.src(globs[, options])

glob 匹配模式
return stream可以pipe到其他插件中