利用gulp工具来压缩css文件

约定不等于承诺〃 2022-06-11 09:11 161阅读 0赞

压缩 css 代码可降低 css 文件大小，提高页面打开速度，因此也可以提高网页的性能，接下来我们来看一下，我们怎么利用gulp工具来进行css文件的压缩。

1）首先我们先安装gulp这个工具，安装这个工具之前需要本地环境支持node.js，所以我们首先安装的是node.js,这个倒是挺容易安装的，去官网去下载.mis安装包，很快我们就可以安装好了。安装了node.js,里面内置有npm(包管理器)，我们可以直接使用npm来直接安装gulp,但是为了安装速度快一点，我们可以采用国内的淘宝镜像来进行安装。

在命令提示符中输入：

npm install -g cnpm --registry=https://registry.npm.taobao.org

之后我们就使用cnpm来代替npm.

2）然后在global环境和项目文件中都install gulp npm install gulp -g   (global环境) npm install gulp --save-dev (项目环境) 3）在项目中install需要的gulp插件，一般只压缩的话需要     npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev     更多插件可以在这个链接中找到 http://gratimax.NET/search-gulp-plugins/ 4）在你的文件的根目录下建立一个gulpfile.js文件 然后在里面写  var gulp = require('gulp'),
              minifycss = require('gulp-minify-css'),
              concat = require('gulp-concat'),
              uglify = require('gulp-uglify'),
              rename = require('gulp-rename'),
              del = require('del');
    gulp.task('css',function(){
    return gulp.src('css/*.css').pipe(minifycss()).pipe(gulp.dest('minifyed/css'))
    });
    gulp.task('default',['css']);.pipe(minifycss())：指的是压缩文件， .pipe(gulp.dest('minifyed/css'))：指的是把压缩后的文件放进minifyed文件夹中的css文件中。 5）然后在命令提示符中，在文件夹的目录下，运行gulp命令行，就可以将css文件压缩。