使用gulp和browserfy从脚本文件进程访问Jquery库

Access to Jquery library from a script file process with gulp and browserfy

本文关键字：进程 访问 Jquery 文件 脚本 gulp browserfy 使用      更新时间：2023-09-26

我有一个使用gulp和browserfy的web项目。这是我的gullfile.js

     var gulp = require('gulp'),
    gutil = require('gulp-util'),
    browserify = require('gulp-browserify'),
    compass = require('gulp-compass'),
    connect = require('gulp-connect'),
    gulpif = require('gulp-if'),
    uglify = require('gulp-uglify'),
    minifyHTML = require('gulp-minify-html'),
    concat = require('gulp-concat');
    path = require('path');
var env,
    jsSources,
    sassSources,
    htmlSources,
    outputDir,
    sassStyle;
env = 'development';
if (env==='development') {
  outputDir = 'builds/development/';
  sassStyle = 'expanded';
} else {
  outputDir = 'builds/production/';
  sassStyle = 'compressed';
}
jsSources = [
 'components/scripts/jqloader.js',
 'components/scripts/supersized.core.min.js',
 'components/scripts/slidebars.js',
 'components/scripts/doubletaptogo.js',
  'components/scripts/script.js'
];
sassSources = ['components/sass/style.scss'];
htmlSources = [outputDir + '*.html'];
gulp.task('js', function() {
  gulp.src(jsSources)
    .pipe(concat('script.js'))
    .pipe(browserify())
    .on('error', gutil.log)
    .pipe(gulpif(env === 'production', uglify()))
    .pipe(gulp.dest(outputDir + 'js'))
    .pipe(connect.reload())
});
gulp.task('compass', function() {
  gulp.src(sassSources)
    .pipe(compass({
      sass: 'components/sass',
      css: outputDir + 'css',
      image: outputDir + 'images',
      style: sassStyle,
      require: ['susy', 'breakpoint']
    })
    .on('error', gutil.log))
//    .pipe(gulp.dest( outputDir + 'css'))
    .pipe(connect.reload())
});
gulp.task('watch', function() {
  gulp.watch(jsSources, ['js']);
  gulp.watch(['components/sass/*.scss', 'components/sass/*/*.scss'], ['compass']);
  gulp.watch('builds/development/*.html', ['html']);
});
gulp.task('connect', function() {
  connect.server({
    root: outputDir,
    livereload: true
  });
});
gulp.task('html', function() {
  gulp.src('builds/development/*.html')
    .pipe(gulpif(env === 'production', minifyHTML()))
    .pipe(gulpif(env === 'production', gulp.dest(outputDir)))
    .pipe(connect.reload())
});
// Copy images to production
gulp.task('move', function() {
  gulp.src('builds/development/images/**/*.*')
  .pipe(gulpif(env === 'production', gulp.dest(outputDir+'images')))
});
gulp.task('default', ['watch', 'html', 'js', 'compass', 'move', 'connect']);

我的html是：

<!doctype html>
<html>
<head>

</head>
<body >
<div id="divExample"></div>
  <script src="js/script.js"></script>
<script>alert($("divExample").width());</script>

</body>
</html>

我得到一个错误，$没有定义，但它是在脚本中定义的。我不确定是否可以使用脚本中包含的jquery库。如果不是，我应该如何使用jquery库。我是否必须再次添加jquery，或者是否有其他解决方案。

当您在browserfy中执行var $ = require('jquery')时，它在该文件之外将不可用。每当您在另一个文件中需要jQuery时，您都需要再次执行var $ = require('jquery')（别担心，它只会包含一次）。您不应该访问该文件之外使用browserfy编译的任何内容。我建议阅读这篇文章，它有点长，但很值得。

https://github.com/substack/browserify-handbook

如果你想在browserify中定义全局变量，你可以看看这个答案：为browserify 定义全局变量

相关文章：