组件系统技术栈 -- Gulp

Posted on | In |

Angular组件库

文档说明

技术中心前端组-组件系统是采用 AngularJS+Gulp 搭建的项目，该文档主要针对Gulp配置文件主要部分进行说明，加深对项目构建的认识，当项目出错时也方便快速定位错误的地方。

Git仓库

目录树

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
├── README.md
├── bower.json
├── gulp                              // gulp配置文件
│   ├── build.js
│   ├── conf.js
│   ├── devRelease.js
│   ├── docs.js
│   ├── images.js
│   ├── inject.js
│   ├── marketplace.js
│   ├── scripts.js
│   ├── server.js
│   ├── styles.js
│   └── watch.js
├── gulpfile.js                      // gulp配置文件入口
├── package.json
└── src                              // 业务代码
    ├── 404.html
    ├── app
    │   └── theme
    ├── assets
    │   ├── fonts
    │   ├── img
    │   └── pictures
    ├── auth.html
    ├── index.html
    ├── reg.html
    └── sass

gulp

gulp 用于前端项目的构建，如监控程序文件变化，检查js代码正确性，压缩js，源码转换到发布目录，启动web 服务测试等等

命令：gulp 执行任务顺序

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── clean                                 // 执行之前先清空之前打包后的文件
└── build                                 // 打包任务
    ├── html                              // html打包
    │   ├── inject
    │   │   ├── scripts
    │   │   ├── styles
    │   │   ├── injectAuth
    │   │   │   └── stylesAuth
    │   │   ├── inject404
    │   │   │   └── styles404
    │   │   └── copyVendorImages
    │   └── partials
    ├── fonts                            // 字体打包    
    └── other                            // 其他文件打包，如图片
        └── copyVendorImages

入口文件 gulpfile.js

gulp 的使用从 gulpfile.js 开始，先看看该项目 gulpfile.js 的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
'use strict';
var gulp = require('gulp');
var wrench = require('wrench');
wrench.readdirSyncRecursive('./gulp').filter(function(file) {
  return (/\.(js|coffee)$/i).test(file);
}).map(function(file) {
  require('./gulp/' + file);
});
gulp.task('default', ['clean'], function () {
  gulp.start('build');
});
  • 这段代码引入了 wrench , 先解释下wrench是做什么的

wrench

这是NodeJS中递归进行文件操作，即递归指定文件夹下的文件，我们递归了 './gulp' 文件夹下以 js|coffee 为后缀的文件如何一一引进来。

路径文件

为了代码的优雅程度，也为了让我们有清晰的思路，我们建立这个文件用来存放路径，之后用到只需要写路径对应的变量即可。

gulp / conf.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
var gutil = require('gulp-util');
exports.paths = {
  src: 'src',
  dist: 'release',
  devDist: 'dev-release',
  tmp: '.tmp',
  e2e: 'e2e'
};
exports.wiredep = {
  exclude: [/\/bootstrap\.js$/, /\/bootstrap-sass\/.*\.js/, /\/require\.js/],
  directory: 'bower_components',
  overrides: {}
};
exports.errorHandler = function (title) {
  'use strict';
  return function (err) {
    gutil.log(gutil.colors.red('[' + title + ']'), err.toString());
    this.emit('end');
  };
};

task : clean

gulp-load-plugins 提供一个便捷方式，我们只需要将需要的功能方法引进来就可以调用它，这里我们使用了del方法，引入 conf.js，然后情况该路径下的文件或文件夹。

1
2
3
4
5
6
7
8
9
10
11
var path = require('path');
var gulp = require('gulp');
var conf = require('./conf');
var $ = require('gulp-load-plugins')({
  pattern: ['gulp-*', 'main-bower-files', 'uglify-save-license', 'del']
});
gulp.task('clean', function () {
  return $.del([path.join(conf.paths.dist, '/'), path.join(conf.paths.tmp, '/')]);
});

task : build

该任务完成了html,font 的打包

html打包

该任务执行的是遍历文件夹找到html文件，进行压缩打包后，放入指定文件夹内

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
gulp.task('html',function () {
  var htmlFilter = $.filter('*.html', { restore: true, dot:true});  //遍历找到对应的html文件
  return gulp.src(path.join(conf.paths.tmp, '/serve/*.html'))
    .pipe(htmlFilter)
    .pipe($.minifyHtml({   
      empty: true,
      spare: true,
      quotes: true,
      conditionals: true
    }))
    .pipe(htmlFilter.restore)
    .pipe(gulp.dest(path.join(conf.paths.dist, '/')))
    .pipe($.size({ title: path.join(conf.paths.dist, '/'), showFiles: true }));
  });

font 打包方法同上

1
2
3
4
5
gulp.task('fonts', function () {
  return gulp.src($.mainBowerFiles('**/*.{eot,svg,ttf,woff,woff2}'))
    .pipe($.flatten())
    .pipe(gulp.dest(path.join(conf.paths.dist, '/fonts/')));
});

task : watch

这部分是为了实时监控代码的更新变化，当新增加一类文件时，发现页面没有效果，可以看看是否将路径或文件类型加到这部分里面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
gulp.watch([path.join(conf.paths.src, '/*.html'), 'bower.json'], ['inject-reload']);
  gulp.watch([
    path.join(conf.paths.src, '/sass/**/*.css'),
    path.join(conf.paths.src, '/sass/**/*.scss')
  ], function(event) {
    if(isOnlyChange(event)) {
      gulp.start('styles-reload');
    } else {
      gulp.start('inject-reload');
    }
  });
  gulp.watch(path.join(conf.paths.src, '/app/**/*.js'), function(event) {
    if(isOnlyChange(event)) {
      gulp.start('scripts-reload');
    } else {
      gulp.start('inject-reload');
    }
  });
  gulp.watch(path.join(conf.paths.src, '/app/**/*.html'), function(event) {
    browserSync.reload(event.path);
  });

task : serve

serve 是启动项目所用，当执行 gulp serve 时，会执行 watch 任务后打开对应路径下的静态页面。

1
2
3
gulp.task('serve', ['watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});