利用gulp工具来压缩css文件

最新推荐文章于 2024-04-14 09:44:42 发布

香柠檬YU

最新推荐文章于 2024-04-14 09:44:42 发布

阅读量786

点赞数

文章标签：压缩 gulp 构建工具 cnpm CSS

本文链接：https://blog.csdn.net/sinat_36841379/article/details/76648453

版权

压缩 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文件压缩。