How can I integrate Bower with Gulp.js?

后端 未结 2 1664
不知归路
不知归路 2020-12-23 10:18

I am trying to write a gulp task that does a few things

  1. Install the Bower dependencies
  2. Concat those dependencies into one file in the order of the dep
相关标签:
2条回答
  • 2020-12-23 10:29

    I was attempting to run the listed gulpfile and ran into a couple errors. First gulpFilter.restore is not a function, and secondly if you plan on restoring the filtered files you need to pass {restore: true} when you define your filters. Like so:

    // gulpfile.js
    
    var mainBowerFiles = require('main-bower-files');
    
    var gulp = require('gulp');
    
    // define plug-ins
    var flatten = require('gulp-flatten'),
      gulpFilter = require('gulp-filter'),
      uglify = require('gulp-uglify'),
      minifycss = require('gulp-minify-css'),
      rename = require('gulp-rename'),
      mainBowerFiles = require('main-bower-files');
    
    // Define paths variables
    var dest_path =  'www';
    
    // grab libraries files from bower_components, minify and push in /public
    gulp.task('publish-components', function() {
      var jsFilter = gulpFilter('*.js', {restore: true}),
          cssFilter = gulpFilter('*.css', {restore: true}),
          fontFilter = gulpFilter(['*.eot', '*.woff', '*.svg', '*.ttf'], {restore: true});
    
      return gulp.src(mainBowerFiles())
    
      // grab vendor js files from bower_components, minify and push in /public
      .pipe(jsFilter)
      .pipe(gulp.dest(dest_path + '/js/'))
      .pipe(uglify())
      .pipe(rename({
        suffix: ".min"
      }))
      .pipe(gulp.dest(dest_path + '/js/'))
      .pipe(jsFilter.restore)
    
      // grab vendor css files from bower_components, minify and push in /public
      .pipe(cssFilter)
      .pipe(gulp.dest(dest_path + '/css'))
      .pipe(minifycss())
      .pipe(rename({
          suffix: ".min"
      }))
      .pipe(gulp.dest(dest_path + '/css'))
      .pipe(cssFilter.restore)
    
      // grab vendor font files from bower_components and push in /public
      .pipe(fontFilter)
      .pipe(flatten())
      .pipe(gulp.dest(dest_path + '/fonts'));
    });
    

    After the changes mentioned it ran perfectly. :)

    0 讨论(0)
  • 2020-12-23 10:49

    Use main-bower-files

    It grabs all production (main) files of your Bower packages defined in your project's bower.json and use them as your gulp src for your task.

    integrate it in your gulpfile:

    var mainBowerFiles = require('main-bower-files');
    

    I made this task that grabs all production files, filters css/js/fonts and outputs them in the public folder in their respective subfolders (css/js/fonts).

    Here's an example:

    var gulp = require('gulp');
    
    // define plug-ins
    var flatten = require('gulp-flatten');
    var gulpFilter = require('gulp-filter'); // 4.0.0+
    var uglify = require('gulp-uglify');
    var minifycss = require('gulp-minify-css');
    var rename = require('gulp-rename');
    var mainBowerFiles = require('main-bower-files');
    
    // Define paths variables
    var dest_path =  'www';
    // grab libraries files from bower_components, minify and push in /public
    gulp.task('publish-components', function() {
    
            var jsFilter = gulpFilter('**/*.js');
            var cssFilter = gulpFilter('**/*.css');
            var fontFilter = gulpFilter(['**/*.eot', '**/*.woff', '**/*.svg', '**/*.ttf']);
    
            return gulp.src(mainBowerFiles())
    
            // grab vendor js files from bower_components, minify and push in /public
            .pipe(jsFilter)
            .pipe(gulp.dest(dest_path + '/js/'))
            .pipe(uglify())
            .pipe(rename({
                suffix: ".min"
            }))
            .pipe(gulp.dest(dest_path + '/js/'))
            .pipe(jsFilter.restore())
    
            // grab vendor css files from bower_components, minify and push in /public
            .pipe(cssFilter)
            .pipe(gulp.dest(dest_path + '/css'))
            .pipe(minifycss())
            .pipe(rename({
                suffix: ".min"
            }))
            .pipe(gulp.dest(dest_path + '/css'))
            .pipe(cssFilter.restore())
    
            // grab vendor font files from bower_components and push in /public
            .pipe(fontFilter)
            .pipe(flatten())
            .pipe(gulp.dest(dest_path + '/fonts'));
    });
    
    0 讨论(0)
自定义标题
段落格式
字体
字号
代码语言
提交回复
热议问题