4、以gulp-minify-css插件为例演示gulp的使用方法

阅读() @2018-10-29 18:16:11

下面是gulp-minify-css插件的使用方法:

如果了解了之前的gulp安装配置基本方法,那么使用gulp-minify-css插件就很简单了。

第一步:安装插件

打开命令行,执行 npm install gulp-minify-css --save-dev

--save-dev 保存配置信息至 package.json 的 devDependencies 节点。

安装gulp-minify-css插件

上一节笔记中,创建了gulpFile.js文件,在这个文件的代码末端加入以下代码:

//压缩css
var cssmin = require('gulp-minify-css');
gulp.task('testCssmin', function(){
    gulp.src('./css/style.css')//该任务针对的文件
        .pipe(cssmin({
            advanced : false,//默认是false,是否开启高级优化
            compatibility: 'ie7',//保留“ie7”以下兼容写法
            keepBreaks : true,//是否保留换行
            keepSpecialComments : '*'//保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀,如果不加这个参数,有可能将会删除你的部分前缀
        }))//该任务调用的模块
        .pipe(gulp.dest('./dist'));//将会在dist目录下生成代码压缩之后的style.css文件
});

然后通过命令行或者是WebStorm工具,运行这个任务即可看到在disk文件夹下经过代码压缩的style.css文件!

微信二维码