【问题标题】:Gulp.js minifies, uglifies and copies all the files but still the app in the dist folder doesn't workGulp.js 缩小、丑化和复制所有文件,但 dist 文件夹中的应用程序仍然无法运行
【发布时间】:2018-03-11 08:33:56
【问题描述】:

我正在做一个项目,这是我第一次尝试使用 gulp 来组织我的 Web 应用程序。

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');
const uglify = require('gulp-uglify');
const cssminify = require('gulp-cssmin');

// Copies html to dist folder
gulp.task('copyHtml', function(){
    return gulp.src('./*.html')
    .pipe(gulp.dest('dist'));
});

gulp.task('imgOpt', function(){
    return gulp.src('./images/{**\/*.*,*.*}')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'))
});
gulp.task('minify', function(){
    return gulp.src('./js/*.js')
    .pipe(uglify().on('error', function(e){
        console.log(e);
    }))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('copyAssets', function(){
    return gulp.src('./assets/**/*.*')
    .pipe(gulp.dest('dist/assets'));
});

gulp.task('copyJSON', function(){
    return gulp.src(['!package.json', '*.json'])
    .pipe(gulp.dest('dist'));
});

gulp.task('minifycss', function(){
    return gulp.src('./css/*.css')
    .pipe(cssminify().on('error', function(e){
        console.log(e);
    }))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('copyFonts', function(){
    return gulp.src('./fonts/**/*.*')
    .pipe(gulp.dest('dist/fonts'));
});

gulp.task('default',['copyHtml', 'imgOpt', 'minifycss', 'minify', 'copyAssets', 'copyJSON', 'copyFonts']);

gulp.task('watch', function(){
    gulp.watch('./*.html',['copyHtml']);
    gulp.watch(['!package.json', '*.json'],['copyJSON']);
    gulp.watch('./fonts/**/*.*',['copyFonts']);
    gulp.watch('./assets/**/*.*',['copyAssets']);
    gulp.watch('./images/{**\/*.*,*.*}',['imgOpt']);
    gulp.watch('./css/*.css',['minifycss']);
    gulp.watch('./js/*.js',['minify']);
});

上面是我的 gulpfile.js。当我在 git 中使用 gulp 命令处理此文件时,该命令可以正常工作并创建了“dist”文件夹,但传输到 dist 文件夹的项目全部混乱,看起来很多代码都丢失了。我无法检测到问题。

我所有的 javascript 代码都在 ES5 中,因为 ES6 标准是不可接受的,并且在此过程中遇到了错误。

【问题讨论】:

  • 什么不起作用?我会先暂时删除所有缩小和丑化的代码。运行它以消除噪音。
  • 我试着按照你说的来检测。如果我在没有缩小的情况下复制纯 css,它工作正常。所以肯定是cssmin导致了问题。我的问题没有解决,但我仔细看了看。非常感谢!

标签: javascript html css node.js gulp


【解决方案1】:

问题解决了。糟糕的是,我正在使用一个旧插件来缩小正在被弃用的 css。现在一切正常。
澄清一下:gulp-minify-css 和 gulp-cssmin 是 gulp 的旧插件,现在没有使用。而是使用 gulp-clean-css 来进行 css 缩小。

https://github.com/jakubpawlowicz/clean-css

【讨论】:

    猜你喜欢
    • 2018-09-18
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-01-25
    • 2020-08-18
    • 1970-01-01
    • 1970-01-01
    • 2019-06-27
    相关资源
    最近更新 更多