Question

我正在将一些代码从Less迁移到Stylus。在下面的代码中，gulp-usemin正确编译了Less文件，但我没有使用Stylus文件。

源文件

gulpfile.js

var gulp    = require('gulp'),
    less    = require('gulp-less'),
    stylus  = require('gulp-stylus'),
    nib     = require('nib'),
    usemin  = require('gulp-usemin');

gulp.task('usemin', function() {
  return gulp.src('src/index.html')
    .pipe(usemin({
      less: [less()],
      stylus: [stylus({use: nib(), compress: false})]
    }))
    .pipe(gulp.dest('dist/'));
});

的index.html

<!-- build:less css/less.css -->
<link rel="stylesheet" type="text/css" href="foo.less">
<link rel="stylesheet" type="text/css" href="bar.less">
<!-- endbuild -->

<!-- build:stylus css/stylus.css -->
<link rel="stylesheet" type="text/css" href="foo.styl">
<link rel="stylesheet" type="text/css" href="bar.styl">
<!-- endbuild -->

foo.less

// This comment should disappear
html {
  margin: 0;
}

bar.less

body {
  background: #eee;
}

foo.styl

// This comment should disappear
html
  margin: 0

bar.styl

body
  background: #eee

编译文件

的index.html

<link rel="stylesheet" href="css/less.css"/>
<link rel="stylesheet" href="css/stylus.css"/>

less.css

html {
  margin: 0;
}
body {
  background: #eee;
}

stylus.css

// This comment should disappear
html
  margin: 0
body
  background: #eee

如您所见，Stylus文件是连接的，但根本没有解析。我正确使用gulp-usemin吗？我应该使用不同的插件吗？

Answer 1

这篇文章没有太多活动，所以我会继续自己回答。

我没有沿着这条道路走下去，而是发现了gulp-inject的美妙世界。 Stylus文件现在可以使用以下代码正确编译，但是副作用很大，就是如何将所有内容干净地注入到html中。

源文件

的index.html

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- components:css -->
  <!-- bower installed css files will go here... -->
  <!-- endinject -->
  <!-- app:css -->
  <!-- built css files will go here... -->
  <!-- endinject -->
</head>
<body>
  <!-- components:js -->
  <!-- bower installed scripts will go here... -->
  <!-- endinject -->
  <!-- app:js -->
  <!-- app scripts will go here... -->
  <!-- endinject -->
</body>
</html>

gulpfile.js

var gulp    = require('gulp'),
    inject  = require('gulp-inject'),
    bower   = require('main-bower-files'),
    filter  = require('gulp-filter'),
    es      = require('event-stream'),
    stylus  = require('gulp-stylus'),
    concat  = require('gulp-concat'),

    cssFilter   = filter('**/*.css'),

    compileBower = function () {
      return gulp.src(bower())
                 .pipe(cssFilter)
                 .pipe(gulp.dest('./app/components/css'))
                 .pipe(cssFilter.restore());
    },

    compileStylus = function () {
      return gulp.src('./src/css/app.styl')
                 .pipe(stylus())
                 .pipe(concat('app.css'))
                 .pipe(gulp.dest('./app'));
    },

    compileJS = function () {
      return gulp.src('./src/app/**/*.js')
                 .pipe(gulp.dest('./app'));
    },

    injectIndex = function () {
      return gulp.src('./src/index.html')
                 .pipe(inject(compileBower(), {name: 'components'}))
                 .pipe(inject(es.merge(compileStylus(), compileJS()), {name: 'app'}))
                 .pipe(gulp.dest('./app'));
    };

gulp.task('build', injectIndex);

示例编译文件

的index.html

<!DOCTYPE html>
<html>
<head>
  <title>MyApp</title>
  <link rel="stylesheet" href="/app/components/css/font-awesome.css"
  <link rel="stylesheet" href="/app/components/css/bootstrap.css">
  <link rel="stylesheet" href="/app/app.css">
</head>
<body>
  <script src="/app/components/js/jquery.js"></script>
  <script src="/app/components/js/bootstrap.js"></script>
  <script src="/app/module/module.js"></script>
  <script src="/app/app.js"></script>
</body>
</html>

用gulp-usemin解析手写笔

源文件

编译文件

1 个答案:

源文件

示例编译文件