我的gulp usemin任务缺少一个js文件

时间:2016-02-20 03:12:44

标签: javascript html jquery-ui gulp gulp-usemin

我正在使用gulp usemin任务来组合和最小化/ uglify我的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。

文件结构: file structure

怎么会这样?只有一个js文件不起作用,但其他文件工作正常吗?

1 个答案:

答案 0 :(得分: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。