node.js - 解析主要的 bower 文件(js、css、scss、图像)以通过 Gulp 分发

Question

我们最近从使用 PHP Assets 管理器切换到 Gulp。我们使用 bower 来拉入我们的前端包及其依赖项。使用仅在“main”中列出 JS 文件的简单 Bower 包非常简单且容易完成。使用“main-bower-files”，我们获取所需的 js 文件并将它们连接成一个脚本文件，我们将其发送到我们的站点/脚本文件夹。我们可以收集并移动到我们网站中的 fonts/文件夹中的字体。然后我们就碰壁了……图片和相应的css/scss文件中的路径怎么办。更复杂的是，我们希望图像保留一些​​原始文件夹布局，这样它们就不会被覆盖。我们想抓取 css 和 scss(我们使用 libsass)文件并将它们与我们自己的样式合并到一个 .css 文件中。但是我们如何才能确保它们仍然具有指向随附图像的工作路径。

所需的文件夹布局如下:

bower.json
gulpfile.js
package.json
bower_components/
site/
  - css/styles.css
  - fonts/
  - images/
    - bower-package-a/
      - arrow.png
      - gradient.png
      - themea-a/
        - arrow.png
      - theme-b/
        - arrow.png
    - bower-package-b/
      - arrow.png
      - gradient.png
  - script/

到目前为止，这是我们的 Gulpfile:

// Include gulp
var gulp = require('gulp');

// Include Plugins
var bower           = require('gulp-bower');
var browserSync     = require('browser-sync').create();
var concat          = require('gulp-concat');
var del             = require('del');
var filter          = require('gulp-filter');
var gutil           = require('gulp-util');
var imagemin        = require('gulp-imagemin');
var jshint          = require('gulp-jshint');
var mainBowerFiles  = require('main-bower-files');
var merge           = require('merge-stream');
var newer           = require('gulp-newer');
var plumber         = require('gulp-plumber');
var pngquant        = require('imagemin-pngquant');
var rename          = require('gulp-rename');
var sass            = require('gulp-sass');
var sourcemaps      = require('gulp-sourcemaps');
var changed         = require('gulp-changed');
var parallel        = require("concurrent-transform");
var os              = require("os");
var imageResize     = require('gulp-image-resize');
var spritesmith     = require('gulp.spritesmith');
var uglify          = require('gulp-uglify');

// Paden
var bowerDest       = 'site/script/lib/bower';
var imgSrc          = 'src/images/**';
var imgDest         = 'site/images';
var spriteImgDest   = './src/images/sprite/';
var scriptSrc       = 'src/script/**/*.js';
var scriptDest      = 'site/script';
var stylesSrc       = 'src/styles/styles.scss';
var stylesDest      = 'site/css';

// Helpers
var onSassError = function(error) {
    gutil.log('Sass Error', gutil.colors.red('123'));
    gutil.beep();
    console.log(error);
    this.emit('end');
}

// Clean images Task
gulp.task('clean:images', function () {
    return del([imgDest]);
});

// Clean script Task
gulp.task('clean:script', function () {
    return del([scriptDest]);
});

// Clean image Task
gulp.task('clean:styles', function () {
    return del([stylesDest]);
});

// Lint Task
gulp.task('lint', function() {
    return gulp.src(scriptSrc)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'))
    ;
});

// Sass Task
gulp.task('sass', ['sprite'], function() {
     return gulp.src(stylesSrc)
        .pipe(plumber({
            errorHandler: onSassError
        }))
        .pipe(sourcemaps.init())
        .pipe(sass({
            includePaths: [
              'bower_components/compass-mixins/lib',
              'bower_components/foundation/scss'
            ],
            outputStyle: 'compressed'
        }))
        .pipe(sourcemaps.write('./map'))
        .pipe(gulp.dest(stylesDest))
        .pipe(browserSync.stream())
    ;
});

// Concatenate & Minify JS
gulp.task('script', function() {
    return gulp.src(scriptSrc)
        .pipe(concat('script.js'))
        .pipe(gulp.dest(scriptDest))
        .pipe(rename('script.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(scriptDest))
    ;
});

// Voeg de JS bestanden die gebruikt worden vanuit bower samen. Let op: modernizr volgt niet de standaard
// en wordt daarom niet meegenomen in mainBowerFiles(). Deze voegen we dus los toe.
gulp.task('bower:js', function() {
    var modernizr = gulp.src('bower_components/modernizr/modernizr.js')
        .pipe(rename('modernizr.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest(scriptDest))
    ;

    var frontend = gulp.src(mainBowerFiles())
        .pipe(sourcemaps.init())
        .pipe(filter('*.js'))
        .pipe(concat('frontend.min.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(scriptDest))
    ;

    return merge(modernizr, frontend);
});

// Imagemin Task (compress images)
gulp.task('imagemin', function () {
    return gulp.src([imgSrc, '!src/images/sprite{,/**}'])
        .pipe(newer(imgDest))
        .pipe(imagemin({
            use: [pngquant()]
        }))
        .pipe(gulp.dest(imgDest))
        .pipe(browserSync.stream())
    ;
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('browser-sync', function() {
    // Serve files from the root of this project
    browserSync.init({
        proxy: "localhost/insyde/website_v6_devtools/site"
    });

    // add browserSync.reload to the tasks array to make
    // all browsers reload after tasks are complete.
    gulp.watch("./src/script/**/*.js", ['scripts-watch']);
});

// generate the x1 images from the big ones
gulp.task('generate-small-sprite-images', function () {
    return gulp.src('./src/images/sprite/*-2x.png')
        .pipe(newer(rename(function(path) {
              path.basename = path.basename.slice(0, -3);  //remove @2x label
        })))
        .pipe(parallel(
            imageResize({
                width: '50%',
                height: '50%'
            }), os.cpus().length
        ))
        .pipe(rename(function(path) {
              path.basename = path.basename.slice(0, -3);  //remove @2x label
        }))
        .pipe(gulp.dest(spriteImgDest))
;});

gulp.task('sprite', ['generate-small-sprite-images'], function () {
    var spriteData = gulp.src('./src/images/sprite/**/*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        retinaImgName: 'sprite-2x.png',
        cssName: 'sprite.scss',
        imgPath: '../images/sprite.png', 
        retinaImgPath : '../images/sprite-2x.png', 
        retinaSrcFilter: '**/*-2x.png'
    }));
    // Pipe image stream through image optimizer and onto disk
    var imgStream = spriteData.img
        .pipe(imagemin())
        .pipe(gulp.dest(imgDest));

    // Pipe CSS stream through CSS optimizer and onto disk
    var cssStream = spriteData.css
        .pipe(gulp.dest('./src/styles/'));

    // Return a merged stream to handle both `end` events
    return merge(imgStream, cssStream);
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('./src/script/**/*.js', ['lint', 'script']);
    gulp.watch('./src/styles/**/*.scss', ['sass']);
    gulp.watch('./src/images/**', ['imagemin']);
    gulp.watch('./templates/**/*.html').on('change', browserSync.reload);
});

// Default Tasks
gulp.task('default', ['lint', 'sass', 'bower:js', 'script', 'imagemin', 'watch']);
gulp.task('frontend', ['lint', 'sprite', 'sass', 'bower:js', 'script', 'imagemin', 'browser-sync', 'watch']);
gulp.task('clean', ['clean:images', 'clean:script', 'clean:styles']);

// create a task that ensures the `scripts` task is complete before
// reloading browsers
gulp.task('scripts-watch', ['script'], browserSync.reload);   

Answer 1

成功了!

我以此为例:https://github.com/jonkemp/gulp-useref/issues/60#issuecomment-77535822

这些任务的作用是:

bower : Assets 将 bower 包(我们通过使用 main-bower-files 找到)的“main”属性中定义的所有 Assets 文件(图像和字体)复制到 site/dist/，同时保持包本身的原始文件夹布局。

bower :样式解析来自 main-bower-files 的每个样式表(不包括两个包:foundation 和 compass-mixins)并修改指向我们之前复制的图像和字体的 url。这与示例的不同之处在于，在我的情况下，文件不会首先复制到 .tmp 目录，而是得到处理，然后直接写入 site/css 文件夹。我连接并缩小了 css，同时使用 sourcemaps 使调试更容易。

//copy bower assets that need copying
gulp.task('bower:assets', function() {
    return gulp.src(mainBowerFiles(), {
        base: './bower_components'
    })
    .pipe(filter([
        '**/*.{png,gif,svg,jpeg,jpg,woff,eot,ttf}',
        '!foundation/**/*',
        '!compass-mixins/**/*'
    ]))
    .pipe(gulp.dest('./site/dist'));
});

//generate bower stylesheets with correct asset paths
gulp.task('bower:styles', function() {
    return gulp.src(mainBowerFiles(), {
        base: './bower_components'
    })
    .pipe(filter([
        '**/*.{css,scss}',
        '!foundation/**/*',
        '!compass-mixins/**/*'
    ]))
    .pipe(foreach(function(stream, file) {
        var dirName = path.dirname(file.path);
        return stream
            .pipe(rework(reworkUrl(function(url) {
                var fullUrl = path.join(dirName, url);
                if (fs.existsSync(fullUrl)) {
                    bowerCopyFiles.push(fullUrl);
                    console.log(path.relative('css', fullUrl).replace(/bower_components/, 'dist'));
                    return path.relative('css', fullUrl).replace(/bower_components/, 'dist');
                }
                return url;
            })));
    }))
    .pipe(sourcemaps.init())
    .pipe(concat('bower.css'))
    .pipe(minifyCss())
    .pipe(sourcemaps.write('./map'))
    .pipe(gulp.dest(stylesDest));
});

这一切导致以下目录结构:

• bower_components
• 网站
  • CSS
    • bower.css
  • 距离
    • bower-component-a
      • 图像
        • 箭头.png
        • 渐变.png
    • bower-组件-b
      • 图像
        • 箭头.png
        • 渐变.png