main-bower-files插件在gulp中的应用_gulp main-bower-files-优快云博客

引入插件

var gulp = require('gulp'),
    bowerFiles = require('main-bower-files'), // bower相关文件处理
    inject = require('gulp-inject'), // 插入插件
    order = require("gulp-order"), // 判断引入优先级
    _if = require('gulp-if'); // 引用判断
    // ... 此处不再一一引入

配置相关gulp任务

关键代码：

// 处理bower相关的样式和脚本构建, 只针对css和js进行处理
gulp.task('bower-files', function() {
    return gulp.src(allPath.injectPath.bowerFiles)
        .pipe(plumber())
        .pipe(order(["ionic.bundle.min.js"]))
        .pipe(_if('*.css', cleanCSS({rebase: true})))
        .pipe(_if('*.css', concat(allPath.replacePath.bowerCss)))
        .pipe(_if('*.css', gulp.dest(allPath.dist + '/.')))
        .pipe(_if('*.js', uglify()))
        .pipe(_if('*.js', concat(allPath.replacePath.bowerJs)))
        .pipe(_if('*.js', gulp.dest(allPath.dist + '/.')))
});

配置插入任务

// 插入任务
gulp.task('inject', function () {
    gulp.src(allPath.index)
        .pipe(plumber())
        // 注入bower相关的 css 和 js
        .pipe(inject(gulp.src(allPath.injectPath.bowerFiles, {read: false}).pipe(order(["ionic.bundle.min.js"])), {name:'bower', relative: true}))
        // 注入自己模块的css
        .pipe(inject(gulp.src(allPath.injectPath.appCss, {read: false}), {starttag: '<!-- inject:appCss:{{ext}} -->', relative: true}))
        // 注入自己模块的js
        .pipe(inject(gulp.src(allPath.injectPath.appJs, {read: false}), {starttag: '<!-- inject:appJs:{{ext}} -->', relative: true}))
        .pipe(gulp.dest(allPath.src))
});

index.html 中处理tag, 分别用于处理bower中的css和js

<!-- build:bowerCss -->
<!-- bower:css -->    
<!-- endinject -->
<!-- endbuild -->


<!-- build:bowerJs -->
<!-- bower:js -->
<!-- endinject -->
<!-- endbuild -->

开发模式下的gulp任务

//运行Gulp时,搭建起跨域服务器 开发模式下
gulp.task('server', function() {
    // connectFlag = 0; // 特定意义的标志变量和此处的main-bower-files无关，在项目中有用
    // portFlag = 0; // 同上
    runSequence(['connect', 'watch', 'inject', 'open']);
});

bower.json 中的配置举例

{
  "name": "ionic-sample",
  "private": "true",
  "dependencies": {
    "ionic": "^1.3.2",
    "ngCordova": "^0.1.27-alpha",
    "angular-cookies": "#1.5.8",
    "ionic-native-transitions": "shprink/ionic-native-transitions#^1.0.2",
    "ionic-image-lazy-load": "ion-image-lazy-load#*"
  },
  "overrides": {
    "ionic": {
      "main": [
        "release/css/ionic.min.css",        
        "release/js/ionic.bundle.min.js"
      ]
    },
    "angular":{
      "ignore":true
    },
    "angular-animate":{
      "ignore":true
    },
    "angular-sanitize":{
      "ignore":true
    },
    "angular-ui-router":{
      "ignore":true
    }
  },
  "resolutions": {
    "angular": ">= 1.0.8"
  }
}