189.gulp创建处理css文件任务

在cmd窗口执行命令:npm install gulp-cssnano,该插件为npm管理的一个包,其实npm就相当于是Python中的pip,pip是Python包的管理工具,而npm就是node包的管理工具。

对于css文件的处理,主要就是将文件进行压缩,对css文件进行压缩只是依靠gulp包还是不能进行的,同样需要一个gulp的插件,gulp-cssnano,该插件可以将css文件进行压缩的处理。

具体的示例代码如下:

var gulp = require('gulp');
var cssnano = require('gulp-cssnano');

//创建一个名为css的任务,赋予该任务一个匿名函数
gulp.task('css', function() {
    //将源文件在/js/所有js文件进行以下相关处理
    gulp.src('./css/*.css')
    //将源文件通过pip流传送给cssnano这个处理器
    .pipe(cssnano())
    //将处理过的文件放到目的文件夹中,这就使用到了gulp内置的函数gulp.dest(),可以将文件放到目的地
    .pipe(gulp.dest('./dist/css/'))
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装Gulp首先需要安装Node.js,并在控制台输入$ npm install gulp -gMac端需要写成$...
    LaBaby_阅读 4,524评论 0 1
  • 参照Gulp for Beginners来学习Gulp基本内容。以下为学习记录笔记。 安装Gulp 首先需要安装N...
    JenniferYe阅读 7,384评论 1 17
  • 原文地址:https://css-tricks.com/gulp-for-beginners/原文代码:https...
    小雨雪smile阅读 5,362评论 0 2
  • 对网站资源进行优化,并使用不同浏览器测试并不是网站设计过程中最有意思的部分,但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 4,766评论 0 8
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 10,871评论 1 32

友情链接更多精彩内容