当前位置: 首页 > 面试题库 >

gulp将所有css文件缩小为一个文件

农飞翔
2023-03-14
问题内容

我有如下gulp任务脚本,

// loads various gulp modules
var gulp = require('gulp');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var rename = require('gulp-rename');

// create task
gulp.task('css', function(){
    gulp.src('src/css/**/*.css')
        .pipe(minifyCSS())
        .pipe(rename('style.min.css'))
        .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
        .pipe(gulp.dest('dist/css'))
});

如何将src / css中的所有css文件最小化为dist / css / style.min.css的单个文件?


问题答案:

您的gulp任务缺少concat管道。

gulp.src('src/css/**/*.css')
    .pipe(minifyCSS())
    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9'))
    .pipe(concat('style.min.css'))
    .pipe(gulp.dest('dist/css'))

这是有关使用gulp进行构建的很好的教程:

http://www.smashingmagazine.com/2014/06/11/building-with-
gulp/



 类似资料:
  • 本文向大家介绍使用gulp-concat将所有CSS文件合并为一个,包括了使用gulp-concat将所有CSS文件合并为一个的使用技巧和注意事项,需要的朋友参考一下 示例 首先,安装gulp并gulp-concat插件到您的项目本地 并将gulp-concat任务添加到您的gulpfile.js 启动gulp命令后,插件gulp-concat将获取css/目录中的所有CSS文件,并将它们合并为一

  • 你好,我是一个很新的一大口。问题是当我用命令“gulp”运行默认任务时,scss文件没有编译,而是复制到css文件夹这是我的gulpfile.js

  • 问题内容: 我正在尝试通过合并和压缩CSS和JS文件来优化网站性能。考虑到我所面临的实际情况,我的问题更多地是关于如何实现这一(具体)步骤的(尽管在其他开发人员中也应该是典型的)。 我的页面引用了多个CSS和JS文件,如下所示: 对于生产版本,我想将3个CSS文件合并为一个,并使用例如将其最小化。但是,然后,我需要更新所有需要这3个文件的页面,以引用刚缩小的CSS。这似乎容易出错(例如,您要在许多

  • 我正在使用来自Grav(https://getgrav.org/downloads/skeletons)的Saturn站点主题,并希望更改主页的背景图像(以及最终的其他样式)。在主题的自定义CSS()中,我更改了背景图像,但除非同时更新和,否则不会呈现新图像。 我相信两个档案都改是不合适的;系统应该生成一个缩微CSS的新版本。阅读Grav文档(https://learn.getgrav.org/t

  • 问题内容: 我有一堆文件放在类似的文件夹中 我想将所有json合并到一个文件中吗? 问题答案: 简短说明:

  • 压缩 CSS 文件需要使用到 optimize-css-assets-webpack-plugin插件 一、压缩 css 文件的核心配置 // webpack.config.js webpack的配置文件 // 路径: ./webpack.config.js //…… //引入optimize-css-assets-webpack-plugin插件 const OptimizeCssAssets