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

    执行任务正常

  • 相关阅读:
    andorid jar/库源码解析之Butterknife
    JavaScript DOM 鼠标拖拽
    JavaScript JSON 与 AJAX
    JavaScript DOM 事件模型
    JavaScript DOM 样式操作
    JavaScript DOM 常用尺寸
    JavaScript 日期与计时器
    JavaScript DOM 基础
    JavaScript 数组
    JavaScript 对象拷贝
  • 原文地址:https://www.cnblogs.com/han-1034683568/p/6479288.html
Copyright © 2020-2023  润新知