其他的和打包前一篇随笔(打包js)

http://www.cnblogs.com/teersky/p/7251329.html

相同,本篇文章主要写gulpFile.js的配置:

安装CSS打包插件:

cnpm install gulp
cnpm install gulp-minify-css

之后新建gulpfile.js文件

//打包css
var gulp =require ("gulp")
var minifyCss=require ("gulp-minify-css")
gulp.task("css", function () { gulp.src("css/*.css")
.pipe(minifyCss())
.pipe(gulp.dest("dist/css"))
}) gulp.task("auto",function(){
gulp.watch("css/*.css",["css"])
})
gulp.task("default",["css","auto"])

打包js和打包css主要区别计算css中require的包名称为gulp-minify-css,

安装image打包插件:

cnpm install gulp
cnpm install gulp-imagemin

之后新建gulpfile.js文件

//打包图片
var gulp = require('gulp'); var imagemin = require('gulp-imagemin') gulp.task('images', function () {
gulp.src('img/*.*')
.pipe(imagemin({
progressive: true
}))
.pipe(gulp.dest('dist/img'))
}); gulp.task('auto', function () {
gulp.watch('images/*.*)', ['images'])
}); gulp.task('default', ['images', 'auto'])

打包js和打包css主要区别计算css中require的包名称为gulp-imagemin,

安装Less打包插件:

cnpm install gulp
cnpm install gulp-less

之后新建gulpfile.js文件

//打包Less
var gulp = require ("gulp")
var gulpLess = require ("gulp-less") gulp.task("less", function(){
gulp.src('css/*.less')
.pipe(gulpLess())
.pipe(gulp.dest("disk/css"))
}) gulp.task("auto", function(){
gulp.watch("css/*.css",["less"])
}) gulp.task("default", ["less","auto"])

打包js和打包css主要区别计算css中require的包名称为gulp-less,

安装Sass打包插件:

cnpm install gulp
cnpm install gulp-ruby-sass

之后新建gulpfile.js文件

//打包Sess
var gulp = require('gulp')
var sass = require('gulp-ruby-sass')
gulp.task('sass', function() {
return sass('sass/')
.on('error', function (err) {
console.error('Error!', err.message);
})
.pipe(gulp.dest('dist/css'))
}); gulp.task('auto', function () {
gulp.watch('sass/**/*.scss', ['sass'])
});
gulp.task('default', ['sass', 'auto'])

打包js和打包css主要区别计算css中require的包名称为gulp-ruby-sass,

其他的和js打包基本一致,

运行统一为: gulp

ok,搞定

gulp打包css/image/Less/Sass的更多相关文章

  1. 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)

    一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...

  2. webpack快速入门——CSS进阶:SASS文件的打包和分离

    1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

  3. [转]gulp打包工具总结

    与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...

  4. gulp打包详解

    gulp的作用 删除文件中冗余的内容,压缩文件,减小文件体积 实际项目中运行的都是压缩完成以后的文件 减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频 ...

  5. 关于前端CSS预处理器Sass的小知识!

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  6. gulp 打包合并

    1.安装node.js  下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node  -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...

  7. 使用gulp打包普通项目

    前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...

  8. 前端CSS预处理器Sass

    前面的话   "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...

  9. css预处理器sass使用教程(多图预警)

    css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...

随机推荐

  1. eWebEditor9.x整合教程-Xproer.WordPaster

    版权所有 2009-2017 荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webplug/wordpa ...

  2. madvise、fadvise、posix_madvise和posix_fadvise函数的使用

    系统调用madvise的作用:建议内核如何使用指定段的内存.函数原型如下: #include <sys/mman.h> int madvise(void *addr, size_t len ...

  3. (转)用事实说话,成熟的ORM性能不是瓶颈,灵活性不是问题:EF5.0、PDF.NET5.0、Dapper原理分析与测试手记

    原文地址:http://www.cnblogs.com/bluedoctor/p/3378683.html [本文篇幅较长,可以通过目录查看您感兴趣的内容,或者下载格式良好的PDF版本文件查看] 目录 ...

  4. 百度地图离线API及地图数据下载工具

    全面介绍,请看下列介绍地址,改写目前最新版本的百度V2.0地图,已全面实现离线操作,能到达在线功能的95%以上 http://api.jjszd.com:8081/apituiguang/gistg. ...

  5. 【SQL】- 基础知识梳理(二) - SQL简介

    一.引言 在梳理这些知识之前,说实话,如果有人问我SQL是什么?我可能会回答就是“INSERT,DELETE,UPDATE,SELECT”语句呗,还能是啥. 二.SQL概念 SQL是什么? SQL是S ...

  6. 【大数据之数据仓库】HAWQ versus GreenPlum

    谈到GreenPlum,肯定会有同事说HAWQ!是的,在本系列第一篇选型流水记里,也有提到.因为对HAWQ接触有限,没有深入具体了解,所以很多信息都是来自于博文,人云亦云,我把看过的资料简要整理,希望 ...

  7. Linux 运维工程师经典面试题合集(不断更新中 ...)

    写在前面的话 做运维以来,关注了很多关于互联网技术,培训等乱七八糟的公众号,时不时的就会推一些各种公司的面试题过来. 大致看了一下,发现自己很多知识要么遗忘了,要么很难说出个所以然,所以这里对那些个人 ...

  8. Can't install Solaris 10 on XenServer 6.5 VM

    I have XenServer 6.5 installed on a server, and i have been trying to install Solaris 10 on a VM, it ...

  9. 同一个程序里有多个版本的App

    在Xcode中添加多个targets进行版本控制,就是同一个app开发多个版本 以Xcode 9.3 为例 1. 创建 点击左侧工程项目文件,选择TARGETS 下的项目右击选择 Duplicate. ...

  10. Jenkins忘记密码

    当Jenkins密码忘记时,可以去Jenkins的安装目录下的users\用户名_xxxxx\config.conf文件下找下找到<passwordHash></passwordHa ...