1. 程式人生 > >Error: Cannot find module 'gulp-clone'問題的解決

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等模組即可。

執行任務正常

相關推薦

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

安裝完gulp環境,並且配置好gulpfile.js,執行靜態檔案壓縮和程式碼混淆時,出現如下錯誤: Error: Cannot find module 'gulp-clone' Error: Cannot find module 'gulp-html'

Gulp Error: Cannot find module 'jshint/src/cli'

ins can image 提示 pre -- sta 查找 插件 首先是執行 gulp 的時候,提示:    此時,第一反應是: npm install gulp-jshint -g 理論上來說,除非還有插件沒有安裝,那麽執行 gulp 是可以的。然而,出現以下錯誤(

Error: Cannot find module 'gulp-sass'

HR body controls ack all pil AC date res 運行gulp報錯 module.js:339 throw err; Error: Cannot find module ‘gulp-sass‘ at Fun

解決React Native:Error: Cannot find module 'asap/raw'

在使用react-native-tab-navigator元件的時候啟動報如下錯誤: Error: Cannot find module 'asap/raw' at Function.Module._resolveFilename (internal/modules/cjs/loader.j

完美解決 npm start 報錯 Error: Cannot find module 'XX' 的問題

問題: 在處理weex專案時,npm start 啟動不了本地服務 但是使用weex run ios 可以啟動iOS模擬器, npm start 報錯,缺少ws模組導致啟動不了localhost本地服務,無法瀏覽器除錯 完美解決 npm start 報錯 Error: Canno

Error: Cannot find module 'webpack'錯誤解決

$ npm install webpack -g $ npm install webpack-cli -g 全域性安裝webpack webpack hello.js -o hello.bundle.js 執行一個已經建立的hello.js檔案報錯 E:\webpack\node_

npm安裝gitbook出現Error: Cannot find module 'graceful-fs'的解決方法

一、問題       在git使用命令列npm install gitbook-cli -g   安裝 npm list graceful-fsgitbook時報了一個錯誤:    Error: Cannot find module 'graceful-fs'    at F

Gulp Error: Cannot find module 'jshint/src/cli'

module.js:442 throw err; ^ Error: Cannot find module 'jshint/src/cli' at Function.Module

centos系統nodejs伺服器報錯 Error: Cannot find module 'jQuery' 的解決辦法

我們先看看nodejs伺服器引入的內容 可以看到,我們在裡面已經引入jquery外掛,接下來執行伺服器 node server.js 竟然報錯了, 奇怪了,我在windwos上除錯的時候明明是沒問題的啊,  後來瞭解到,其實在linux伺服器上其實是區分大小寫的

把一個vue專案拷貝到另一個地方啟動不了的解決辦法(Error: Cannot find module ‘’')

公司的專案拷貝到家裡,是不是就啟動不了了。雖然使用了cnpm install安裝之後還是瘋狂提示你缺少什麼什麼包,而且按照他的提示永遠安裝不完。就像下面這樣   造成這樣的原因是當你在一臺電腦上編譯後npm會有cache快取,到另外一臺電腦上編譯這個專案的快取與原快取不一

解決React Native:Error: Cannot find module 'asap/raw'

在使用react-native-tab-navigator元件的時候啟動報如下錯誤: Error: Cannot find module 'asap/raw' at Function.Module._

解決Node.js Error: Cannot find module ‘node-static’

Cannot find module 問題在測試WebRTC codelab的時候,執行codelab\complete\step1出錯,丟擲Error:module.js:340throw err;^Error:Cannot find module'node-static'

node 報錯:Uncaught Error: Cannot find module "!!../../../node_modules/extract-webpack-plugin/loader.js

方法 nod ima enc mage modules ann not uncaught 問題出在缺少less和less-loader 因為以上模塊使用了less解析。 解決方法在dependencies添加 "less": "^2.7.1", "less-lo

Error: Cannot find module 'chalk' 報錯

fin 依賴 hal npm 重新安裝 col 否則 方法 sta 有些小夥伴在執行 npm run dev 時,報下面的錯誤, Error: Cannot find module ‘chalk‘ ..... 方法1.看看是不是你改動過根文件的文件名,是這樣的

Error: Cannot find module 'babel-runtime/regenerator'

fix all sta 分享圖片 解決 第一步 tracking 一個 ews 在做調用阿裏雲短信接口時遇到的一個問題 錯誤原因:沒有正確安裝相應的mmodule 解決辦法: 第一步:在package.json中加入依賴label-runtime 第二步

Error: Cannot find module 'babel-helpers'

res sta style conf plugin cannot core con not cnpm install babel-core babel-loader babel-plugin-transform-runtime -D cnpm install babel-

React,Error: Cannot find module 'webpack'

Error: Cannot find module 'webpack' at Function.Module._resolveFilename (module.js:547:15) at Function.Module._load (module.js:474:25)

webpack.config.js配置遇到Error: Cannot find module '@babel/core'問

一、 啥問題 在配置webpack.config.js自動打包的時候,出現Error: Cannot find module '@babel/core'錯誤 最初以為是babel-core沒有安裝上。

webpack Error: Cannot find module 'webpack-cli/bin/config-yargs'

電腦使用的webpack版本為3.12.0 區域性安裝webpack-dev-server,並且全域性安裝webpack-dev-server後,發現如下error webpack-dev-server The CLI moved into a separate pack

webpack.config.js配置遇到Error: Cannot find module '@babel/core'問題

一、 問題描述 在配置webpack.config.js自動打包的時候,出現Error: Cannot find module '@babel/core'錯誤 最初以為是babel-core沒有安裝上。重灌了好幾遍babel-core還是不行。對照以前的專案,發現babel