Question

我需要帮助将js文件链接到我的html页面。我正在使用Gulp处理我的html，scss和js文件，在构建时它们被分发到dist文件夹中。这是我的gulp代码的一部分：

// Optimizing CSS and JavaScript 
gulp.task('useref', function() {

  return gulp.src('app/*.html')
    .pipe(useref())
    .pipe(gulpIf('*.js', uglify()))
    .pipe(gulpIf('*.css', cssnano()))
    .pipe(gulp.dest('dist'));

});

是我的gulp文件中的构建序列：

gulp.task('build', function(callback) {
  runSequence(
    'clean:dist',
    'sass',
    ['useref', 'images', 'fonts', 'sassdoc'],
    callback
  )
})

我的js文件中有一些控制台日志会被处理。

console.log('This is the Main.js file. It should be the 3rd and final file');

但不是以下相同的文件：我在同一个main.js文件中有一些js代码，它将nav div设置为position：top 0;向下滚动但是这个js代码永远不会被利用。这是我在@Commercial Suicide的帮助下获得的js代码，它在stackoverflow上作为代码片段运行。

var body = document.getElementsByTagName('body')[0],
   nav = document.getElementById('nav');

window.addEventListener('scroll', function() { 
 if (body.scrollTop > 0) {
   nav.className += " no-indent"
 } else {
   nav.classList.remove("no-indent");
 }
}, true)

在我的scss中，我有nav div中的nav id和nav div上的no-ident类，它有以下css：

.no-indent { 
top: 0 !important;
}

我的html文件中js文件的链接设置在body标签的底部：

<script src="js/main.js"></script>

js文件位于js文件夹中的html文件之上。

这就是我的分发文件夹中处理和缩小的js的样子：

!function() {
}(), console.log("This is the Main.js file. It should be the 3rd and final file");
var body = document.getElementsByTagName("body")[0],
    nav = document.getElementById("nav");
window.addEventListener("scroll", function() {
    body.scrollTop > 0 ? nav.className += " no-indent" : nav.classList.remove("no-indent")
}, !0);

-Thanks

Answer 1

首先，我认为这与Gulp无关，因为你提到了处理缩小的JS文件的控制台行。

我创建了一个JSFiddle，您的脚本调整很小。即使在本地尝试它仍然有效。但是你仍然应该考虑事件限制。

如果问题仍然存在，那么我认为它与您的运行时环境有关。另一个浏览器可能会有所帮助，以检查是否是导致问题。其次，HTML文件的其余部分是否有效？

关于脚本的小注释。滚动事件不止一次被触发。这将在此行nav.className += " no-indent"生成不必要的类声明。 _“建议限制事件”_ Scroll event, developer.mozilla.org

以下是有关事件限制和去抖动right here

的详细说明

js代码没有在网页上运行

1 个答案: