gulp 构建失败并且 npm 不创建 node_modules答案

【问题标题】：gulp build fails and npm does not create node_modulesgulp 构建失败并且 npm 不创建 node_modules
【发布时间】：2021-10-11 15:10:48
【问题描述】：

我有一个正在尝试构建的 maven 项目，但是当 gulp 运行时我陷入了失败循环。目前该错误表明在 node_modules 目录中没有找到 gulp，这是有道理的，因为我运行 npm install 时没有创建目录。

    [ERROR] internal/modules/cjs/loader.js:670
    [ERROR]     throw err;
    [ERROR] Error: Cannot find module 'C:\Users\damianakis.LAPTOP- 
    TOSHIBA2\Documents\$INSTALL_DIR\03_app_source\afdbUI\node_modules\gulp\bin\gulp'
    [ERROR]     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
    [ERROR]     at Function.Module._load (internal/modules/cjs/loader.js:591:27)
    [ERROR]     at Function.Module.runMain (internal/modules/cjs/loader.js:877:12)
    [ERROR]     at internal/main/run_main_module.js:21:11

我是一个新手，我还没有弄清楚一切，但据我所知，它应该使用包含在项目目录中的 bower.json 和 gulpfile 创建（没有包文件）。这是我的 gulpfile：

const
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    rename = require('gulp-rename'), //rename files
    replace = require('gulp-replace'), //replace text in files
    del = require('del'), //delete files / directories
    autoprefixer = require('gulp-autoprefixer'), //autoprefix css for browsers compatibility
    cssnano = require('gulp-cssnano'), //minify css
    jshint = require('gulp-jshint'), //validate js files
    // uglify = require('gulp-uglifyes'), //minify js
    terser = require('gulp-terser'),
    imagemin = require('gulp-imagemin'), //minify images
    rev = require('gulp-rev'), //calculate revision number based on file contents
    gzip = require('gulp-gzip'),
    revRewrite = require('gulp-rev-rewrite'), //replace references of versioned files
    slash = require('gulp-slash'),
    logger = require('gulp-logger'),
    runSequence = require('run-sequence'),
    pug = require('gulp-pug'),
    ngConfig = require('gulp-ng-config');


const paths = {
    src: {
        base: './src/main/webapp/',
        base_app: 'app/',
        app_subs: 'app/**/',
        scss: 'app/scss/**/',
        js: 'app/js/**/',
        html: 'app/html/**/',
        views: 'app/views/**/',
        assets: 'assets/**/',
        webinf: 'WEB-INF/**/',
        properties: './src/main/resources/**/',
        app_config: 'app/js/config.json'
    },
    manifest: './rev-manifest.json',
    target: {
        base: './src/main/webapp/',
        js: 'dist/js/',
        css: 'dist/css/',
        html: 'dist/html/',
        views: 'dist/views/',
        app_config: 'dist/js/afdb.config.js'
    },

    assets: 'assets',
    webinf: 'WEB-INF',
    layouts: 'layouts',
    pages: 'pages',
    properties: 'properties',
    all_subs: '**/'
};


gulp.task('default', ['build']);

gulp.task('build', function(callback) {
    runSequence(
            'build-clean',

            'build-constants-prod',
            'build-views',
            'build-css',
            'build-scripts',
            'rev-rewrite',
            callback
    );
});

gulp.task('build-dev', function(callback) {
    runSequence(
            'build-clean',

            'build-constants-dev',
            'build-views',
            'build-css',
            'build-scripts-dev',
            'rev-rewrite',
            callback
    );
});



gulp.task('build-constants-prod', function () {
    return gulp.src(paths.src.base + paths.src.app_config)
            .pipe(ngConfig('afdb.config', { environment: 'env.production'}))
            .pipe(gulp.dest(paths.target.base + paths.target.js));
});

gulp.task('build-constants-dev', function () {
    return gulp.src(paths.src.base + paths.src.app_config)
            .pipe(logger({
                before: 'Logger ==> ngConfig()...',
                after: 'Logger ==> ngConfig() complete!',
                extName: '.js',
                showChange: true
            }))
            .pipe(ngConfig('afdb.config', { environment: 'env.local'}))
            .pipe(gulp.dest(paths.target.base + paths.target.js));
});


gulp.task('build-css', () =>
    gulp.src([paths.src.base + paths.src.scss + '*.scss'])
        .pipe(logger({
            before: 'Logger ==> sass()...',
            after: 'Logger ==> sass() complete!',
            extName: '.scss',
            showChange: true
        }))
        .pipe(sass({errLogToConsole: true}))
        // .pipe(gulp.dest(paths.target.base + paths.target.css))
        .pipe(autoprefixer({
            browsers: ['last 2 versions'],
            cascade: false
        }))
        .pipe(slash())
        .pipe(logger({
            before: 'Logger ==> css rev()...',
            after: 'Logger ==> css rev() complete!',
            extName: '.css',
            showChange: true
        }))
        .pipe(rev())
        // .pipe(rename({suffix: '.min'}))
        // .pipe(cssnano())
        .pipe(gulp.dest(paths.target.base + paths.target.css))
        .pipe(
                rev.manifest(paths.target.base +  paths.manifest, {
                    merge: true, // merge with the existing manifest (if one exists)
                    base: paths.target.base
                })
        )
        .pipe(gulp.dest(paths.target.base))
);

gulp.task('build-scripts',  () => {

    let manifest = gulp.src(paths.target.base + paths.manifest);

    return gulp.src([paths.src.base + paths.src.js + '*.js'])
            .pipe(jshint('.jshintrc'))
            .pipe(jshint.reporter('default'))
            .pipe(logger({
                before: 'Logger ==> PROD scripts rev()...',
                after: 'Logger ==> PROD scripts rev() complete!',
                extName: '.js',
                showChange: true
            }))
            .pipe(rev())
            .pipe(terser())
            .pipe(revRewrite({manifest: manifest}))
            // .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest(paths.target.base + paths.target.js))
            .pipe(
                    rev.manifest(paths.target.base + paths.manifest, {
                        merge: true, // merge with the existing manifest (if one exists)
                        base: paths.target.base
                    })
            )
            .pipe(gulp.dest(paths.target.base));
});

/**
 * Don't minify
 */
gulp.task('build-scripts-dev',  () => {

    let manifest = gulp.src(paths.target.base + paths.manifest);

    return gulp.src([paths.src.base + paths.src.js + '*.js'])
            .pipe(jshint('.jshintrc'))
            .pipe(jshint.reporter('default'))
            .pipe(logger({
                before: 'Logger ==> DEV scripts rev()...',
                after: 'Logger ==> DEV scripts rev() complete!',
                extName: '.js',
                showChange: true
            }))
            .pipe(rev())
            // .pipe(uglify())
            .pipe(revRewrite({manifest: manifest}))
            // .pipe(rename({suffix: '.min'}))
            .pipe(gulp.dest(paths.target.base + paths.target.js))
            .pipe(
                    rev.manifest(paths.target.base + paths.manifest, {
                        merge: true, // merge with the existing manifest (if one exists)
                        base: paths.target.base
                    })
            )
            .pipe(gulp.dest(paths.target.base));
});


gulp.task('build-views',  () =>
        gulp.src([paths.src.base + paths.src.views + paths.all_subs + '*.pug'])
                .pipe(logger({
                    before: 'Logger ==> Starting pug...',
                    after: 'Logger ==> pug complete!',
                    extName: '.pug',
                    showChange: true
                }))
                .pipe(pug()) // pipe to pug plugin
                .pipe(logger({
                    before: 'Logger ==> views rev()...',
                    after: 'Logger ==> views rev() complete!',
                    extName: '.pug',
                    showChange: true
                }))
                .pipe(rev())

                .pipe(gulp.dest(paths.target.base + paths.target.views))
                .pipe(
                        rev.manifest(paths.target.base + paths.manifest, {
                            merge: true, // merge with the existing manifest (if one exists)
                            base: paths.target.base
                        })
                )
                .pipe(gulp.dest(paths.target.base))
);


//clean up destination folder
gulp.task('build-clean', () =>
     del([
            paths.target.base + paths.target.css + '**/*.css',
            paths.target.base + paths.target.js,
            paths.target.base + paths.target.views,
            paths.target.base + paths.manifest
    ], {
        force: true
    })
);


gulp.task('rev-rewrite', () => {
    let manifest = gulp.src(paths.target.base + paths.manifest);
    // console.log(paths.target.base + paths.manifest);
    // console.log('manifest', manifest);

    // return gulp.src('./src/main/webapp/app/html/index.html')
    // return gulp.src( [ paths.src.base + paths.src.html, paths.target.base + paths.target.js], { base: paths.target.base} )
    return gulp.src( [ paths.src.base + paths.src.html, paths.target.base + paths.target.js])
            .pipe(logger({
                before: 'Logger ==> Starting rewrite...',
                after: 'Logger ==> rewrite complete!',
                showChange: true
            }))
            .pipe(revRewrite({manifest: manifest}))
            .pipe(gulp.dest(paths.target.base))
});

gulp.task('rev-rewrite-index', () => {
    let manifest = gulp.src(paths.target.base + paths.manifest);
    // console.log(paths.target.base + paths.manifest);
    // console.log('manifest', manifest);

    // return gulp.src('./src/main/webapp/app/html/index.html')
    return gulp.src( paths.src.base + paths.src.html)
            .pipe(logger({
                before: 'Logger ==> Starting rewrite index...',
                after: 'Logger ==> rewrite index complete!',
                extName: '.html',
                showChange: true
            }))
            .pipe(revRewrite({manifest: manifest}))
            .pipe(gulp.dest('./src/main/webapp/'));
});


gulp.task('watch', function() {

    // Watch .css files
    gulp.watch(paths.src.base + paths.src.scss + '*.scss', ['build-dev']);

    // Watch .js files
    gulp.watch(paths.src.base + paths.src.js + '*.js', ['build-dev']);

    // Watch .pug files
    gulp.watch(paths.src.base + paths.src.views + '*.pug', ['build-dev']);

    // Watch index.html
    gulp.watch(paths.src.base + 'app/html/index.html', ['rev-rewrite']);

    // Watch embed.html
    gulp.watch(paths.src.base + 'app/html/embed.html', ['rev-rewrite']);

    /*
        // Watch template .html files
        gulp.watch(paths.src_app_subs + '*.html', ['build']);

        // Watch image files
        gulp.watch(paths.src_images, ['build']);
    */

});

这是我的 pom 文件，它在 gulp 构建执行时失败。

 <?xml version="1.0" encoding="UTF-8"?>
    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
        <parent>
            <artifactId>afdbMaster</artifactId>
            <groupId>com.primecognition.afdb</groupId>
            <version>1.4.3</version>
            <relativePath>../afdbMaster/pom.xml</relativePath>
        </parent>
        <modelVersion>4.0.0</modelVersion>
        <artifactId>afdbUI</artifactId>
        <packaging>war</packaging>

        <properties>
            <jetty.server.version>9.4.8.v20171121</jetty.server.version>
            
        </properties>

        <dependencies>
   
            <dependency>
                <groupId>org.eclipse.jetty</groupId>
                <artifactId>jetty-server</artifactId>
                <version>${jetty.server.version}</version>
            </dependency>
        </dependencies>

        <build>
            <plugins>
                <plugin>
                    <groupId>org.eclipse.jetty</groupId>
                    <artifactId>jetty-maven-plugin</artifactId>
                    <configuration>
                        <scanIntervalSeconds>5</scanIntervalSeconds>
                    </configuration>
                </plugin>
                <plugin>
                    <groupId>com.github.eirslett</groupId>
                    <artifactId>frontend-maven-plugin</artifactId>
                    <version>1.6</version>
                    <executions>
                        <execution>
                            <id>install node and npm</id>
                            <goals>
                                <goal>install-node-and-npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                            <configuration>
                                <nodeVersion>v11.15.0</nodeVersion>
                            </configuration>
                        </execution>
                        <execution>
                            <id>npm config</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                            <configuration>
                                <arguments>config set cache node_npm_cache --global</arguments>
                            </configuration>
                        </execution>
                        <execution>
                            <id>npm install</id>
                            <goals>
                                <goal>npm</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                        <!--<execution>-->
                            <!--<id>bower install</id>-->
                            <!--<goals>-->
                                <!--<goal>bower</goal>-->
                            <!--</goals>-->
                            <!--<configuration>-->
                                <!--<arguments>install</arguments>-->
                            <!--</configuration>-->
                        <!--</execution>-->
                        <execution>
                            <id>gulp build</id>
                            <goals>
                                <goal>gulp</goal>
                            </goals>
                            <phase>generate-resources</phase>
                        </execution>
                    </executions>
                </plugin>
            </plugins>
        </build>


    </project>

我已经安装了项目需要的节点 v11.15.0，我知道在我同事的 ubuntu 环境中运行的 npm 6.7.0 和 gulp 2.3.0。我有 Windows 10，但我不知道这是否会造成问题。

另外，当我运行 npm install 时，我会收到这些警告，提示我升级。我也试过了，升级到 gulp 4，但我很难转换我的 gulpfile，所以我把它改回旧版本。

npm WARN gulp-autoprefixer@8.0.0 需要 gulp@>=4 的对等体，但没有安装。您必须自己安装对等依赖项。 npm WARN gulp-imagemin@7.1.0 需要 gulp@>=4 的对等点，但没有安装。您必须自己安装对等依赖项。 npm WARN 文档无描述 npm WARN Documents 没有存储库字段。 npm WARN 文档没有许可证字段。

任何关于可能是什么问题以及我如何解决它的猜测都会非常有帮助。

【问题讨论】：

标签： maven gulp node-modules npm-install

【解决方案1】：

Gulp 应该作为开发依赖安装，因为你的 maven 项目只运行 npm install。所以在你的项目的根目录（你可以找到 package.json），run npm i gulp@3.9.1 这将安装 gulp 模块并将其添加到可以在 package.json 中查看的开发依赖项中。下次有人使用您的存储库时，它应该也能正常工作，因为 npm install 也将安装 gulp 模块。

【讨论】：