基本NPM，Gulp设置

我试图自动化我的前端开发，所以我开始通过与NPM的依赖关系。 我的package.json如下所示：

 "main": "main.js", "dependencies": { "jquery": "^2.1.4", "vue": "^0.12.8" }, "devDependencies": { "gulp": "^3.9.0", "gulp-autoprefixer": "^2.3.1", "gulp-browserify": "^0.5.1", "gulp-concat": "^2.6.0", "gulp-minify-css": "^1.2.0", "gulp-notify": "^2.2.0", "gulp-rename": "^1.2.2", "gulp-sass": "^2.0.4", "gulp-uglify": "^1.2.0" } 

我的gulpfile.json看起来像：

 var gulp = require('gulp'), sass = require('gulp-sass'), minify_css = require('gulp-minify-css'), notify = require('gulp-notify'), autoprefix = require('gulp-autoprefixer'), concat = require('gulp-concat'), uglify = require('gulp-uglify'), rename = require('gulp-rename'); var src = { sass: 'assets/sass/', js: 'assets/js/', }; var output = { css: 'public/css/', js: 'public/js/', }; gulp.task('css', function () { return gulp.src(src.sass + 'main.scss') .pipe(sass()) .pipe(autoprefix('last 10 version')) .pipe(minify_css()) .pipe(rename({basename: 'styles'})) .pipe(gulp.dest(output.css)) .pipe(notify('CSS processed.')) .pipe(browserSync.reload({stream: true})); }); gulp.task('js', function () { return gulp.src([ src.js + 'main.js', ]) .pipe(concat('app.js')) .pipe(uglify()) .pipe(gulp.dest(output.js)) .pipe(notify('JS processed.')); }); gulp.task('watch', function () { browserSync.init({server: './output'}); gulp.watch(src.sass + '**/*.scss', ['css']); gulp.watch(src.js + '**/*.js', ['js']); gulp.watch(src.js + '**/*.js', ['js']); }); gulp.task('default', ['css', 'js', 'watch']); 

有用！ 大！

我想开始在main.js编写代码，但是我被卡住的地方是搞清楚如何在我的main.js文件中require jQuery和Vue（以及其他） 。

（编辑：它不一定必须在main.js文件中完成，我只是想最终的结果是，我可以编写代码按预期，并缩小它。似乎我不能require('jquery')在一口气js的任务内，但也许我错误地做了。）

Answer 1

由于您只是在构build/工作stream程中使用节点，因此您不会在应用程序代码中调用Node的导出（希望）。 所以简短的回答是，不pipe你以前在做什么。

编辑：我看到你用browserify标记了这个问题。 如果您正在尝试使用browserify，那么您需要做的就是运行browserify命令，然后执行您的依赖关系。 节点的要求，这是你目前在你的gulp文件中调用，是一个不同的动物。 它用于确保您拥有所有需要的软件包，但是您需要运行browserify，以便您的应用程序代码中的需求可以正常工作。