ltaoo's web

基于 gulp 的前端开发环境

发表于  |    |   分类于

在平常学习的时候，会需要写一些 demo，想要用到 gulp 来方便开发、调试，但是每次都复制一份gulpfile.js很麻烦，所以先写好一个符合自己技术栈的脚手架，放在 github 上，借助 vue-cli 来简化初始化项目的操作。

“Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node.js 构建的，利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。Gulp.js 源文件和你用来定义任务的 Gulp 文件都是通过 JavaScript（或者 CoffeeScript ）源码来实现的。

使用方式

由于是借助 vue-cli 这个脚手架工具来下载放在 github 上的脚手架，所以需要先全局安装vue-cli

1
npm install -g vue-cli

然后使用vue init命令创建项目

1
vue init ltaoo/demofed <projectName>

ltaoo/demofed为我的脚手架在 github 上的仓库名。

可以看到会在当前目录创建projectName文件夹，进入文件夹安装项目需要的依赖

1
npm install

安装好依赖后，就可以开始使用了

1
npm start

等待一会可以看到浏览器打开127.0.0.1:3000页面，表示成功运行。

gulpfile.babel.js

项目的核心文件，通过该文件调用我们的所有的功能，包括编译 sass、编译 es6 到 es5，将 es5 打包合并等功能。

gulp 应该是有两个核心的概念，一个是“流”，一个是“任务”。

使用gulp.src()可以打开一个文件，文件通过该方法变成了“水流”，水流在pipe里面流动，pipe上的“插件”可以对“水流”进行改造，比如改变颜色等，最后“水流”到了dest()源头后，又变回了文件。

sass 任务

该任务会将.scss后缀的文件转换为.css后缀。

1
2
3
4
5
6
7
8
gulp.task('sass', ()=>{
  return gulp.src(source.css)
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(output.css))
    .pipe(browserSync.stream());
});

build-js 任务

该任务将js文件转换为能够在浏览器中执行的js文件。

1
2
3
4
5
6
7
8
9
10
11
12
13
gulp.task('build-js', () =>{
  return browserify(source.main, {
    debug: true
  }).transform(babel)
    .bundle()
    .pipe(vinyl(output.main))
    .pipe(buffer())
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    // 输出的就是编译好的
    .pipe(gulp.dest(output.script))
    .pipe(browserSync.stream());
});

dev 任务

开启静态服务器，并且在指定文件改变时刷新页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
gulp.task('dev', ['sass', 'build-js'], () =>{
  browserSync.init({
    server: {
      baseDir: './'
    }
   //或者代理一个服务器
   //proxy: "127.0.0.1:8080" 替代server键值对，不是baseDir!!!!。
  });
  gulp.watch(source.css, ['sass']);
  gulp.watch(source.scripts, ['build-js']);
  gulp.watch(source.index, () =>{
    browserSync.reload();
  });
})

default 任务

前面的任务都可以在全局安装gulp后，使用gulp <taskName>的形式来调用单个任务。如果不指定任务，即gulp命令将会执行default任务。

1
gulp.task('default', ['dev']);

其实这个任务的目的是为了少打dev，使用gulp dev可以实现相同的效果。

难点

这里面困扰我很久的地方是将 es5 代码使用browserify打包成浏览器可用的代码，并且可调试。

打包很简单，有browserify和gulp-browserify两个插件，后者比前者要简单，就像前面说的可以对“水流”进行改造。但是不知道为什么，无法生成正确的sourcemaps。网上的文章大部分都是使用browserify，该插件不同于gulp-browserify，是可以独立使用的，意味着它是自己接收文件，自己处理文件，自己输出文件。

但是又因为我们要将browserify和gulp搭配使用，所以就需要将browserify产生的“流”变成gulp可用的流（两个虽然都是流，但是有区别，就好像一个是水流，一个是岩浆流…），所以用到了vinyl-source-stream和vinyl-buffer来完成这一目的。

所以build-js任务可以看到和其他处理文件的任务不同的是没有使用gulp.src()。

TODO

之所以借助vue-cli来从 github 下载脚手架，因为自己实现一个类似功能的工具比较麻烦，所以在没事情做的时候准备参考 vue-cli 尝试实现一个自己的 npm 包。

  • 自己实现 cli
  • 增加 eshint
  • 增加 单元测试
  • 美化首页？