Error: Cannot find module 'gulp-clone'問題的解決

安裝完gulp環境，並且配置好gulpfile.js，執行靜態文件壓縮和代碼混淆時，出現如下錯誤：

Error: Cannot find module 'gulp-clone'

Error: Cannot find module 'gulp-html'

 

配置文件如下：

/**
 * Created by 13
 **/
var gulp = require('gulp');
var clone = require('gulp-clone');
var htmlmin = require('gulp-htmlmin');
var gulpif = require('gulp-if');
var cssmin = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var useref = require('gulp-useref');
var clean = require('gulp-clean');
var imagemin = require('gulp-imagemin');

//壓縮html
gulp.task('html', function () {
    var options = {
        removeComments: true,  //清除HTML注釋
        collapseWhitespace: true,  //壓縮HTML
        collapseBooleanAttributes: false,  //省略布爾屬性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: false,  //刪除所有空格作屬性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //刪除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //刪除<style>和<link>的type="text/css"
        minifyJS: true,  //壓縮頁面JS
        minifyCSS: true  //壓縮頁面CSS
    };
    return gulp.src('dev-pages/*.html')
    .pipe(htmlmin(options))
    .pipe(gulp.dest('pages/'));
});
//壓縮js
gulp.task('jsmin', function() {
    return gulp.src(['dev-source/js/ajax.js','dev-source/js/ajax_my.js'])
        .pipe(uglify({
            mangle: false
        }))
        .pipe(gulp.dest('source/js/'))
})

// 拷貝圖片文件
gulp.task('image-copy', function () {
    return gulp.src('source-dev/webslice/**/*')
        .pipe(clone())
        .pipe(gulp.dest('source/webslice'));
});

gulp.task('image-min', function () {
    return gulp.src('dev-source/images/*.{png,jpg}')
        .pipe(imagemin())
        .pipe(gulp.dest('source/images/'));
});
//先復制圖片到source，然后再執行壓縮。
gulp.task('image-min2', ['image-copy'], function () {
    return gulp.src('source/webslice/**/*')
        .pipe(imagemin())
        .pipe(gulp.dest('source/webslice/'));
});

gulp.task('image-min3', function () {
    return gulp.src('dev-source/webview/img/*.{png,jpg}')
        .pipe(imagemin())
        .pipe(gulp.dest('source/webview/img/'));
});

//壓縮圖片
gulp.task('images-min',['image-min','image-min2','image-min3'],function() {})

//監聽兩個文件的文件變化
gulp.task('listenPages', function() {
    gulp.watch('dev-pages/*.html',['html']);
    gulp.watch('dev-source/js/*.js',['jsmin']);
});
// 構建任務流
// 執行 task build
gulp.task('build', ['html', 'image-min','jsmin']);

通過查詢官網及網上資料，也可以確定配置文件沒錯，但是依然會報錯，gulp命令可以直接運行，就是配置項中的幾個模塊無法執行。

我是后端開發，前端的知識也就是馬馬虎虎，所以這個問題確實難倒我了，差不多在網上查資料然后改代碼弄了一個小時，依然沒有解決。

后來又看了一下報錯，既然缺少模塊，是不是我沒有安裝啊，這樣一想，再去查構建目錄，果然是沒有安裝這些模塊，我以為安裝gulp后就完事兒了的。

根據gulpfile.js配置項中需要的模塊依次安裝gulp-clone、gulp-htmlmin、gulp-uglify等模塊即可。

執行任務正常