0

我正在使用 gulp usemin 任务来组合和最小化/丑化我的 HTML 中的 css 和 js 文件。

gulp.task('usemin',['jshint'], function () {
  return gulp.src('./app/**/*.html')
      .pipe(usemin({
        css:[minifycss(),rev()],
        js: [uglify(),rev()]
      }))
      .pipe(gulp.dest('dist/'));
});

还有我在 HTML 中的块：

<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="styles/home.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- endbuild -->

<!-- build:js scripts/main.js -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/jquery-ui/jquery-ui.min.js"></script>
<script src="scripts/home.js"></script>
<script src="scripts/controllers.js"></script>
<!-- endbuild -->

但是在我这样做之后。在 dist/ 中，所有其他部分都像在 app/ 中一样运行良好，但jquery-ui.js。我页面中的彩色动画不起作用，这是由于 jquery-ui 造成的。

文件结构： 文件结构

这怎么可能？只有一个js文件不工作，其他的工作正常吗？

4

1 回答 1

0

我自己找出来。我需要将彩色动画的 jquery-ui css 文件添加到 HTML 中，如下所示：

<!-- build:css styles/main.css -->
<link href="../bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="../bower_components/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
<link href="../bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet">

<link rel="stylesheet" href="../bower_components/jquery-ui/themes/smoothness/jquery-ui.min.css">

<link href="styles/home.css" rel="stylesheet">
<link href="styles/timeline.css" rel="stylesheet">
<!-- endbuild -->

但我仍然不太确定为什么在最小化 CSS 文件之前可以毫无问题地使用 jquery-ui。

于 2016-02-20T04:40:16.107 回答