gulp打包css/image/Less/Sass
其他的和打包前一篇随笔(打包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的更多相关文章
- 前端-如何用gulp快速搭建项目(sass预编译,代码压缩,css前缀,浏览器自动刷新,雪碧图合成)
一:gulp优点: 易于使用 通过代码优于配置的策略,Gulp 让简单的任务简单,复杂的任务可管理: 插件高质 Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作. 构建快速 利用 Node ...
- webpack快速入门——CSS进阶:SASS文件的打包和分离
1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...
- [转]gulp打包工具总结
与grunt类似,gulp也是构建工具,但相比于grunt的频繁IO操作,gulp的流操作能更快更便捷地完成构建工作.gulp借鉴了Unix操作系统的管道(pipe)思想,前一级的输出,直接变成后一级 ...
- gulp打包详解
gulp的作用 删除文件中冗余的内容,压缩文件,减小文件体积 实际项目中运行的都是压缩完成以后的文件 减小加载响应时间 gulp打包压缩对象 html,css,js,sass,webserver 音频 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- gulp 打包合并
1.安装node.js 下载地址: http://nodejs.cn/ 打开node.js 命令行,输入: node -v ,有版本号,则正确安装. 2.安装淘宝镜像 :命令行输入 : npm i ...
- 使用gulp打包普通项目
前言: 在使用gulp打包工具之前,我做的H5项目在浏览器中的缓存是很严重的,若改了一点css,加了一句js代码,不手动清除浏览器缓存是看不到效果的.老总也在项目演示当中遇到这些问题,一查找原因却是缓 ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
随机推荐
- mysql_5.6内存过高问题解决
MySQL 5.6安装完之后,每过一段时间就会莫名其妙挂掉.而且还很难启动.非要重启服务器,才能拉起mysql. 后来分析是由于mysql启动后内存过高,跑一段时间就会由于内存不足而被杀死. 今天分析 ...
- HDU 3365 New Ground (计算几何)
题意:给定点A[0~n-1]和B[0],B[1],A[0].A[1]映射到B[0].B[1],求出其余点的映射B[2]~B[n-1]. 析:运用复数类,关键是用模板复数类,一直编译不过,我明明能编译过 ...
- Java SimpleDateFormat工具类
package AnimalDemo; import java.text.ParseException; import java.text.SimpleDateFormat; import java. ...
- 【Head First Java 读书笔记】(一)基本概念
Java的工作方式 你要做的事情就是会编写源代码 Java的程序结构 类存于源文件里面 方法存在类中 语句存于方法中 剖析类 当Java虚拟机启动执行时,它会寻找你在命令列中所指定的类,然后它会锁定像 ...
- SQL聚集索引和非聚集索引的区别
其实对于非专业的数据库操作人员来讲,例如软件开发人员,在很大程度上都搞不清楚数据库索引的一些基本知识,有些是知其一不知其二,或者是知其然不知其所以然.造成这种情况的主要原因我觉的是行业原因,有很多公司 ...
- MongoDB整理笔记のCapped Collection
1.简单介绍 capped collections 是性能出色的有着固定大小的集合,以LRU(Least Recently Used 最近最少使用)规则和插入顺序进行age-out(老化移出)处理,自 ...
- 301 MovedPermanently 重定向
页面永久性移走(301重定向)是一种非常重要的“自动转向”技术. 301重定向可促进搜索引擎优化效果 从搜索引擎优化角度出发,301重定向是网址重定向最为可行的一种办法.当网站的域名发生变更后,搜索引 ...
- stream.fail() eof() EOF
ifstream infile("student.dat"); while((c=infile.get())!=EOF){} //EOF的值是-1 但在 #include&l ...
- cinder侧卸载卷流程分析
cinder侧卸载卷分析,存储类型以lvm+iscsi的方式为分析基础在虚机卸载卷的过程中,主要涉及如下三个函数1)cinder.volume.api.begin_detaching 把volume的 ...
- 【bzoj3796】Mushroom追妹纸 hash/sa+kmp+二分
Description Mushroom最近看上了一个漂亮妹纸.他选择一种非常经典的手段来表达自己的心意--写情书.考虑到自己的表达能力,Mushroom决定不手写情书.他从网上找到了两篇极佳的情书, ...