通过weui-1.1.3源码学习前端开发（二）构建工具gulp

第一篇 通过weui-1.1.3源码学习前端开发（一）解析package.json文件

主要是看了看package.json文件，通过scripts部分，可以看出weui使用了gulp构建工具；

详细的学习gulp可以参考Gulp中文网（https://www.gulpjs.com.cn/）。

在项目的根目录下有gulpfile.js文件，这个文件gulp的构建文件，在看这个文件之前，先学习几个前端开发中用到的技术

Source Maps

模块化

先想到了这些预备知识，下面详细看看gulpfile.js文件

第一部分，各种模块的导入，就像java程序的import，或者c程序的include一样，这个好像没什么好看的，程序中用到的各种模块。

var path = require('path');
var fs = require('fs');
var gulp = require('gulp');
var less = require('gulp-less');
var header = require('gulp-header');
var tap = require('gulp-tap');
var nano = require('gulp-cssnano');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var comments = require('postcss-discard-comments');
var rename = require('gulp-rename');
var sourcemaps = require('gulp-sourcemaps');
var browserSync = require('browser-sync');
var pkg = require('./package.json');

 重点看看yargs模块的引入，定义参数别名和参数类型。

var yargs = require('yargs').options({
  w: {
    alias: 'watch',//参数别名
    type: 'boolean'//参数类型
  },
  s: {
    alias: 'server',
    type: 'boolean'
  },
  p: {
    alias: 'port',
    type: 'number'
  }
}).argv;

下面定义了两个变量，其中__dirname是node.js的公共变量，表示程序的当前执行路径；

var option = { base: 'src' };
var dist = __dirname + '/dist';

下面看看gulp的第一个task：build:style，编译样式文件，35-42行定义了一个编译后的css文件的说明头，53行代码可以看到将header写到了css文件中；

45行代码初始化source map，54行写入source map信息；

55行写一个未压缩的css版本；

57-68行使用cssnano压缩css文件，然后写一个压缩版本min

下面是用到的一些插件的简单介绍，详细信息可以参考npm网站。

gulp-postcss插件：PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.读取css文件，然后使用多个插件进行处理；

简单用法的例子：

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnano = require('cssnano');
 
gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

postcss-discard-comments插件：去掉css中的注释信息；

gulp-header插件：在gulp的流中，添加文件头信息；

gulp-less插件：处理less文件；

gulp-cssnano插件：使用cssnano压缩css文件；

下面看gulp的下一个task：build:example:assets ，非常简单，包括src/example目录及其子目录下面的png,jpg,gif,js文件到dist对应目录下。

 

下一个任务：编译example/example.less文件

下一个任务：处理src/example/index.html文件，主要是把index.html文件当中的

<link rel="import" href="./fragment/home.html">

替换成：

<script type="text/html" id="tpl_home">

插入文件./fragment/home.html的内容

</script>

gulp的具体task就定义完了，下面是两个合并后的任务build:example和release，可以参考package.json文件中的scripts配置。

下面 看看gulp实现的代码同步变化设置，当代码变化后，自动重新编译。

下面看看测试server配置，通过yargs提供的参数进行配置。

gulp.task('server', function() {
  yargs.p = yargs.p || 8080;
  browserSync.init({
    server: {
      baseDir: './dist'
    },
    ui: {
      port: yargs.p + 1,
      weinre: {
        port: yargs.p + 2
      }
    },
    port: yargs.p,
    startPath: '/example'
  });
});

最后看看default任务的配置，gulp默认任务，如果不写启动的task，默认就是default任务。

// 参数说明
//  -w: 实时监听
//  -s: 启动服务器
//  -p: 服务器启动端口，默认8080
gulp.task('default', ['release'], function() {
  if (yargs.s) {
    gulp.start('server');
  }
  if (yargs.w) {
    gulp.start('watch');
  }
});

gulpfile.js文件就基本看完了，这样我们就可以了解整改项目的构建过程了，也可以根据构建过程分布探索各个文件。