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等模組即可。
執行任務正常