文章/答案/技术大牛

发布

社区首页 >问答首页 >用gulp-usemin解析Stylus

问用gulp-usemin解析Stylus
EN

Stack Overflow用户

提问于 2014-11-02 22:24:05

回答 1查看 678关注 0票数 1

我正在将一些代码从Less迁移到Stylus。在我下面的代码中，gulp-usemin正确地编译了较少的文件，但我没有让它与手写笔文件一起工作。

源文件

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？我应该使用不同的插件吗？

gulp

stylus

回答 1

Stack Overflow用户

发布于 2014-11-03 13:05:39

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

我没有继续沿着这条路走下去，而是发现了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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26700365

复制

相似问题

问用gulp-usemin解析Stylus
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用gulp-usemin解析StylusEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用gulp-usemin解析Stylus
EN