gulp 启动一直提示Error: Cannot find module “”

Question

gulp 启动一直提示Error: Cannot find module “”环境变量也配置过了，测试也成功了，一直报这个Cannot find module

gulpfile.js

var url = require('url');
var fs = require('fs');
var path = require('path');

var gulp = require('gulp');
var gulpLoadPlugins = require('gulp-load-plugins');
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');
var gulpSequence = require('gulp-sequence');
var cleanCSS = require('gulp-clean-css');
var uncss = require('gulp-uncss');
var livereload = require('gulp-livereload');
var webserver = require('gulp-webserver');
var fileinclude = require('gulp-file-include');
var $ = gulpLoadPlugins();



livereload({ start: true, auto: false });
//配置路径
var baseUrl = './dev/';
var distUrl = './app/';
var tinypngApi = 'm66cergQwJ-L96d3X1QhVs-mQs8WzrPm';
var configUrl = {
    file: {
        css: baseUrl + 'assets/css/*.css',
        scss: baseUrl + 'assets/sass/**/*.scss',
        images: baseUrl + 'assets/images/*.{png,jpg}',
        js: baseUrl + 'assets/js/*.js',
        html: baseUrl + 'static/*.html',
        htmlfile: baseUrl + '*.html',
        tpl: baseUrl + 'tpl/*.tpl'
    },
    folder: {
        css: baseUrl + 'assets/css',
        images: baseUrl + 'assets/images',
        scss: baseUrl + 'assets/sass',
        sprites: baseUrl + 'assets/sass/sprites',
        js: baseUrl + 'assets/js',
        html: baseUrl

    },
    dist: {
        css: distUrl + 'assets/css',
        images: distUrl + 'assets/images',
        scss: distUrl + 'assets/sass',
        sprites: distUrl + 'assets/sass/sprites',
        js: distUrl + 'assets/js',
        html: distUrl + 'html'
    }
};



//清除文件
gulp.task('clean', function() {
    return gulp.src(configUrl.file.htmlfile)
        .pipe($.clean())
        .pipe($.clean());
});

//制作精灵图
gulp.task('sprites', function() {
    //2 倍图
    // var spriteData = gulp.src('./dev/assets/images/icons/*.png')
    //     .pipe($.spritesmith({
    //         retinaSrcFilter: './dev/assets/images/icons/*@2x.png',
    //         retinaImgName: '../images/sprite@2x.png',
    //         imgName: 'sprite@2x.png',
    //         imgPath: '../images/sprite@2x.png',
    //         cssName: '_icons-sprites.scss',
    //         //cssFormat: 'scss',
    //         //cssSpritesheetName :'icons-',
    //         padding: 20,
    //         algorithm: '', //图像排序算法：top-down,left-right,diagonal,alt-diagonal,binary-tree
    //     }));

    // var imgStream = spriteData.img
    //     .pipe(buffer())
    //     .pipe(gulp.dest(configUrl.folder.images));

    // var cssStream = spriteData.css
    //     .pipe(gulp.dest(configUrl.folder.sprites));

    //生成多个精灵图
    var spirteFile = gulp.src('./dev/assets/images/icons/*.png')
        .pipe($.spritesmith({
            cssOpts: {
                cssSelector: function(item) {
                    // If this is a hover sprite, name it as a hover one (e.g. 'home-hover' -> 'home:hover')
                    if (item.name.indexOf('-hover') !== -1) {
                        return '.icons-' + item.name.replace('-hover', ':hover');
                        // Otherwise, use the name as the selector (e.g. 'home' -> 'home')
                    } else {
                        return '.icons-' + item.name;
                    }
                }
            },
            imgName: 'sprite.png',
            imgPath: '../images/sprite.png',
            cssName: '_icons.scss',
            cssFormat: 'css',
            //cssSpritesheetName: 'foods', //变量名称
            padding: 50,
            algorithm: 'top-down', //top-down,left-right,diagonal,alt-diagonal,binary-tree
        }));

    var imgSprite = spirteFile.img
        .pipe(buffer())
        .pipe(gulp.dest(configUrl.folder.images));

    var cssSprite = spirteFile.css
        .pipe(gulp.dest(configUrl.folder.sprites));

    return merge([imgSprite, cssSprite]);
});

//sass编译
gulp.task('sass', function() {
    return gulp.src(configUrl.file.scss)

.pipe($.sourcemaps.init({ loadMaps: true }))
    .pipe($.sass().on('error', $.sass.logError))
        .pipe($.autoprefixer()) //添加前缀
        .pipe($.csso()) //css清理
        .pipe(cleanCSS({ compatibility: 'ie8' })) //css清理
        .pipe(uncss({
            html: [configUrl.file.htmlfile] //css清理
        }))
        

        .pipe($.sourcemaps.write('./'))
        .pipe(gulp.dest(configUrl.folder.css))
        .pipe(livereload());
});


//压缩排序优化CSS
gulp.task('minicss', function() {
    return gulp.src(configUrl.file.css)
        .pipe($.autoprefixer())
        .pipe($.csscomb())
        .pipe($.csso())
        .pipe(cleanCSS({ compatibility: 'ie8' }))
        .pipe(gulp.dest(configUrl.folder.css));
});





//tinypng图片压缩
gulp.task('tinypng', function() {
    return gulp.src(configUrl.file.images)
        .pipe($.cache($.tinypng(tinypngApi)))
        .pipe(gulp.dest(configUrl.folder.images));

});

//fileinclude
gulp.task('fileinclude', function() {
    gulp.src([configUrl.file.html])
        .pipe(fileinclude({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(gulp.dest(configUrl.folder.html))

        .pipe(livereload());

});

// webserver
gulp.task('webserver', function() {
    gulp.src('./dev') // 服务器目录（./代表根目录）
        .pipe(webserver({ // 运行gulp-webserver
            // host:'192.168.3.113',
            port: 8006, //端口，默认8000
            livereload: true, // 启用LiveReload
            open: true, // 服务器启动时自动打开网页
            directoryListing: {
                enable: true,
                path: './dev/index.html'
            },
            middleware: function(req, res, next) {
                //mock local data
                var urlObj = url.parse(req.url, true),
                    method = req.method;

                if (!urlObj.pathname.match(/^\/api/)) { //不是api开头的数据，直接next
                    next();
                    return;
                }
                var mockDataFile = path.join(__dirname, urlObj.pathname) + ".js";
                //file exist or not
                fs.access(mockDataFile, fs.F_OK, function(err) {
                    if (err) {
                        res.setHeader('Content-Type', 'application/json');
                        res.end(JSON.stringify({
                            "status": "没有找到此文件",
                            "notFound": mockDataFile
                        }));
                        return;
                    }
                    var data = fs.readFileSync(mockDataFile, 'utf-8');
                    res.setHeader('Content-Type', 'application/json');
                    res.end(data);
                });
                next();
            },
            proxies: []
        }));
});

// 监听
gulp.task('watch', function() {
    livereload.listen();
    gulp.watch([configUrl.file.scss, "src/sass/*.scss"], ['sass']);
    gulp.watch([configUrl.file.html, configUrl.file.tpl], ['fileinclude']);

});

// 发布

gulp.task('default', gulpSequence('clean', 'fileinclude', 'sass', 'webserver', 'watch'));

//开发
gulp.task('dev', gulpSequence('clean', 'sprites', 'sass', 'minifyjs', 'tinypng', 'fileinclude', 'htmlmin', 'md5:css', 'watch'));

Answer 1

那是你没安装这个模块 直接npm install gulp-load-plugins

要保存在package.json的话 就npm install gulp-load-plugins --save

Answer 2

报错Cannot find module 指的是在node_modules找不到gulp-load-plugins的包;而不是环境变量 如果是环境变量的问题 他会显示'gulp不是内部命令什么的'
你的gulpfile.js写的

var gulpLoadPlugins = require('gulp-load-plugins');
                      //去node_modules  找'gulp-load-plugins'
                      //他没找到就报错了...

看下你的package.json和node_modules里有没有要找的包
没有就 npm install 重装一下