基本 NPM，Gulp 设置答案

【问题标题】：Basic NPM, Gulp Setup基本 NPM，Gulp 设置
【发布时间】：2023-03-07 16:29:01
【问题描述】：

我正在尝试自动化我的前端开发，因此我首先使用 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 中编写代码，但我遇到的困难是弄清楚如何将require jQuery 和Vue（以及其他任何东西）写入我的main.js 文件。

(编辑：不一定要在main.js文件中完成，我只是希望最终结果是我可以按预期编写代码并缩小它。看来我不能@987654329 @ 在 gulp js 任务中，但也许我做错了。）

【问题讨论】：

你是在节点环境下运行的吗？或者只是在构建过程中使用节点？
我只是在构建过程中使用节点。
听起来像 Webpack / Browserify 会给你想要的东西
@urish 他想使用 Browserify，但没有设置适当的任务。我已经更新了我的答案。

标签： javascript node.js npm browserify

【解决方案1】：

由于您仅将节点用于构建/工作流程，因此您不会（希望）在应用程序代码中调用节点的导出。所以简短的回答是，不管你以前是怎么做的。

编辑：我看到你已经用 browserify 标记了这个问题。如果您尝试使用 browserify，那么您需要做的是让 gulp 任务运行 browserify 命令，然后它将处理您的依赖项。 Node 的 require，也就是您当前在 gulpfile 中调用的内容，是另一种动物。它用于确保您拥有所需的所有软件包，但您需要运行 browserify 以便您的应用代码中的需求能够正常工作。

【讨论】：