安装完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'问题的解决的更多相关文章

  1. 输入指令npx webpack-dev-server报错:Error: Cannot find module ‘webpack-cli/bin/config-yargs‘的解决方法

    输入指令npx webpack-dev-server报错:Error: Cannot find module 'webpack-cli/bin/config-yargs'的解决方法 输入指令:npx ...

  2. Ionic3 遇到的一些错误-Error: Cannot find module 'reflect-metadata'

    E:\Projects\ionic\myApp5>ionic serve Error: Cannot find module 'reflect-metadata' 解决方法: npm insta ...

  3. Error: Cannot find module 'webpack/lib/node/NodeTemplatePlugin'

    在webpack的管理输出的部分,设定HtmlWebpackPlugin部分,运行npm run build 会报错 Error: Cannot find module 'webpack/lib/no ...

  4. Error: Cannot find module '../lib/utils/unsupported.js'

    报错: nodejs : Error: Cannot find module '../lib/utils/unsupported.js' 解决办法(linux): 去node目录下:/node***/ ...

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

    I'm following sitepoint's An introduction to Gulp.js, but I'm stuck on step four, when I try to run  ...

  6. 对express中引入文件时提示Error: Cannot find module错误的理解

    打算写个小demo,在引入一个routes文件时,一直提示Error: Cannot find module('./routes')的错误,经过一番了解. 如果要把整个文件夹下所有的模块都引进来  v ...

  7. inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice'

    inoic start projectname sidemenu报错 - Error: Cannot find module 'lodash._baseslice' 在公司的电脑上出现过这个错误,后来 ...

  8. FreeBSD修改root密码错误passwd: pam_chau(www.111cn.net)thtok(): error in service module from:http://www.111cn.net/sys/freebsd/66713.htm

    在FreeBSD中修改帐号密码有时候会出现一些错误,针对passwd: pam_chauthtok(): error in service module这样的错误提示,简单整理了以下解决方案:错误提示 ...

  9. Error: Cannot find module 'express'

    安装Express命令如下: npm install -g express 安装成功之后会在C:\Users\[YOUR_USER_NAME]\AppData\Roaming\npm\node_mod ...

随机推荐

  1. 用while判读循环语句1+1/2!+1/3!+...1/20!的和阶乘的计算方法 式:n!=n*(n-1)!

    package com.chongrui.test; /* *用while判读循环语句1+1/2!+1/3!+...1/20!的和 *使用BigDecimal类完成大数字与高精度运算 公式:n!=n* ...

  2. JS 响应式编程

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script ...

  3. php模式设计之 策略模式

    策略模式: 策略模式设计帮助构建的对象不必自身包含逻辑,而是能够根据需要利用其他对象中的算法. 使用场景: 例如有一个CD类,我们类存储了CD的信息. 原先的时候,我们在CD类中直接调用getCD方法 ...

  4. 超强JavaScript编辑器WebStorm代码提示迟缓问题及其它想到的

    去D2后发现 Hedger 的js编辑器是webStorm,便下载来试试,结果发现: 虽然WebStorm的js的提示远远不如aptana那么强悍(输入字母d不提示document),但是做为 Int ...

  5. Struts1、WebWork、Struts2介绍

    一.Struts1 1.Struts1原理简介 Struts1框架以ActionServlet作为控制器核心,整个应用由客户端请求驱动.当客户端向Web应用发送请求时,请求被Struts1的核心控制器 ...

  6. spring mvc上传下载文件

    前端jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEnc ...

  7. 在JS中使用COM组件的方法

    首先创建一个COM组件,插入一个双接口Itest,在此接口上实现以下三个方法: STDMETHODIMP Ctest::test(void) //无输入输出参数 { // TODO: 在此添加实现代码 ...

  8. Java反射机制示例

    链接: http://www.cnblogs.com/rollenholt/archive/2011/09/02/2163758.html package com.stono.reftest; imp ...

  9. Mac系统安装Aircrack-ng破解附近wifi密码(1)

    第一步, 安装macport, 安装Xcode 安装macport macport 是一个工具 管理软件包的一个工具, 我们也可以通过别的方式安装Aircrack-ng, 但是通过macport安装A ...

  10. 解析.NET对象的跨应用程序域访问--AppDomain(上篇)

    在目前的项目开发中,分布式开发已经逐渐成为主流.一个项目要是没有采用分布式架构,都不好意思跟别人说这是一个完整的项目.这句话虽然有些过激,但是随着人们对效率的要求在提高,以及产品需要提升用户体验.只有 ...