Gulp 可以添加自定义 CSS 吗？

Question

这是我的 index.html 文件：

<!doctype html>
<html class="no-js">
    <head>
        <meta charset="utf-8">
        <title>Price Tracker</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <!-- bower:css -->
        <link rel="stylesheet" href="../bower_components/bootstrap-css/css/bootstrap.min.css" />
        <!-- endbower -->
    </head>
    <body>
        <!-- bower:js -->
        <script src="../bower_components/jquery/dist/jquery.js"></script>
        <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script>
        <script src="../bower_components/angular/angular.js"></script>
        <script src="../bower_components/bootstrap-css/js/bootstrap.min.js"></script>
        <!-- endbower -->
    </body>
</html>

我的 gulpfile 正确地获取了 bower 依赖项并将它们添加到索引中。但我希望 gulp 选择自定义 CSS 文件。

这可能吗？

Answer 1

是的，你可以嵌入任何你想要的 CSS 文件路径，这就是我正在使用的 htmlReplace

https://github.com/VFK/gulp-html-replace

npm install --save-dev gulp-html-replace

// Task to make the index file production ready
var htmlReplace = require('gulp-html-replace');

gulp.task('build:index', function() {
  gulp.src('app/index.html')
    .pipe(htmlReplace({
        //'app-css' : 'assets/'+version+'/css/dashboard.css',
        'app-css' : 'assets/css/dashboard.css',
    }))
    .pipe(gulp.dest('build/'));
});

然后在您的标记中

<!-- build:app-css -->
<!-- Anything between the build comments gets replaced --> 
<link href="dev/assets/css/dashboard.css" rel="stylesheet">
<!-- endbuild -->

这是删除文件的方式，run-sequence

https://www.npmjs.com/package/del

// Clear out all files and folders from build folder:
gulp.task('build:cleanfolder', function(cb) {
    del([
        'build/**'
    ], cb);
});

这就是您按顺序将不同任务组合在一起的方式

gulp.task('build', function(cb) {
    runSequence(
        'version',                  // Save new version
        'build:del-assets-static',  // Delete old static folder in app/assets
        'build:move-files',         // Move files into new static folder
        'html-templates',           // Generate $templateCache file of HTML partials
        //'build-highcharts-css',            // Minify and concat highcharts styles
        'build-app-css',            // Minify and concat app styles
        'highcharts-js',            // Minify and concat highcharts scripts
        'build-app-js',             // Minify and concat app scripts
        'build:copy',               // Deletes old build folder
        'build:remove',             // Copy then Remove unneeded assets from build
        'build:version',            // Move assets into versioned build folder
        'build:index',              // Replace scripts in index.html
        'build:final-clean', cb);   // Remove app.min.js from build folder
});

Answer 2

gulp-inject is probably what you are looking for. It works similar to Wiredep and lets you specify where to insert css/js tags into the html for every match found (specified by glob pattern)

<!-- Index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>My index</title>
    <!-- bower:css -->
    <!-- endbower -->

    <!-- inject:css -->
    <!-- endinject -->
  </head>
  <body>


    <!-- bower:js -->
    <!-- endbower -->

    <!-- inject:js -->
    <!-- endinject -->
  </body>
</html>





// Gulpfile.js
var gulp = require('gulp');
var inject = require('gulp-inject');

gulp.task('custom', function(){
    var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
    return gulp.src('./index.html')
               .pipe(inject(sources))
               .pipe(gulp.dest('./build'));
})

Gulp 可以添加自定义 CSS 吗？

Can Gulp add a custom CSS?

javascript

bower

gulp