gulp布局构建小结
2016-06-20 12:14
429 查看
一、工具选择
CSS预处理语言LESS
构建工具gulp(基于node环境)
gulp插件:
gulp-connect——主要是用来运行一个webserver
插件介绍:https://www.npmjs.com/package/gulp-connect
gulp.spritesmith——雪碧图
插件介绍:https://www.npmjs.com/package/gulp.spritesmith
gulp-less——less转CSS
插件介绍:https://www.npmjs.com/package/gulp-less
PS切图工具:
cutandslice——这是一款快速裁切透明图标的工具,配合spritesmith使用,可以很快的生成雪碧图片,整合多张小图,减少有服务器请求。
工具网址:http://www.cutandslice.me/#en
教程网址:http://www.zcool.com.cn/article/ZNDYzODA=.html
二、目录设定
|- \ [根目录]
|--project
|--- dist [临时生成点,可随时删除]
|--- images [图片文件夹]
|--- icon [内存放common、member_center两个文件图标]
|--- js [JS文件]
|--- less [less样式]
|--- member_center [用户后台样式]
|--- part [公用样式]
|--- ./ [PC前台样式]
|--- member_center [用户后台html文件]
|--- ./ [PC html文件]
|-- node_modules [node模块]
|-- PSD [PSD文件存放点]
|-- gulpfile.js [gulp 配置文件]
|-- package.json [node模块包文件]
三、gulpfile规则编写
加载模块
创建任务,将开发模式下的文件放置到dist目录
task[dist_html]:用于处理html文件
task[dist_js]:用于处理JS文件
task[dist_less]:用于处理less文件,将其转为css
task[dist_img]:移动图片到dist目录
task[sprite_common]:整合image/icon/common下的目录到icon.png
task[del_old_icon]:删除旧的icon.png
task[dist_icon]:移动新的icon.png到/image下
注:dist_icon执行前会先执行del_old_icon
task[del_dist]:删除dist目录
整合任务以便调用执行
总的任务整合为两部分,一部分为雪碧图整合,另一部分为dist目录生成。
CSS预处理语言LESS
构建工具gulp(基于node环境)
gulp插件:
gulp-connect——主要是用来运行一个webserver
npm install --save-dev gulp-connect
插件介绍:https://www.npmjs.com/package/gulp-connect
gulp.spritesmith——雪碧图
npm install gulp.spritesmith --save-dev
插件介绍:https://www.npmjs.com/package/gulp.spritesmith
gulp-less——less转CSS
npm install gulp-less --save-dev
插件介绍:https://www.npmjs.com/package/gulp-less
PS切图工具:
cutandslice——这是一款快速裁切透明图标的工具,配合spritesmith使用,可以很快的生成雪碧图片,整合多张小图,减少有服务器请求。
工具网址:http://www.cutandslice.me/#en
教程网址:http://www.zcool.com.cn/article/ZNDYzODA=.html
二、目录设定
|- \ [根目录]
|--project
|--- dist [临时生成点,可随时删除]
|--- images [图片文件夹]
|--- icon [内存放common、member_center两个文件图标]
|--- js [JS文件]
|--- less [less样式]
|--- member_center [用户后台样式]
|--- part [公用样式]
|--- ./ [PC前台样式]
|--- member_center [用户后台html文件]
|--- ./ [PC html文件]
|-- node_modules [node模块]
|-- PSD [PSD文件存放点]
|-- gulpfile.js [gulp 配置文件]
|-- package.json [node模块包文件]
三、gulpfile规则编写
加载模块
var gulp = require('gulp'), connect = require('gulp-connect'), del = require('del'), minifyCSS = require('gulp-minify-css'), spritesmith = require('gulp.spritesmith'), less = require('gulp-less');
创建任务,将开发模式下的文件放置到dist目录
task[dist_html]:用于处理html文件
gulp.task('dist_html',function(){ return gulp.src('./project/**/*.html') .pipe(gulp.dest('./project/dist')) })
task[dist_js]:用于处理JS文件
gulp.task('dist_js',function(){ return gulp.src('project/js/**/*.js') .pipe(gulp.dest('project/dist/js')); })
task[dist_less]:用于处理less文件,将其转为css
gulp.task('dist_Less', function () { return gulp.src('project/less/*.less') .pipe(less()) .pipe(gulp.dest('project/dist/css/front')); })
task[dist_img]:移动图片到dist目录
gulp.task('dist_img',['dist_icon'],function(){ return gulp.src(['./project/images/**/*.{png,jpeg,gif,jpg}']) .pipe(gulp.dest('./project/dist/images/')) })
task[sprite_common]:整合image/icon/common下的目录到icon.png
gulp.task('sprite_common', function () { return gulp.src('project/images/front/icon/common/*.png')//需要合并的图片地址 .pipe(spritesmith({ imgName: 'icon.png',//保存合并后图片的地址 cssName: 'sprite.less',//保存合并后对于css样式的地址 padding:5,//合并时两个图片的间距 algorithm: 'top-down',//注释1 cssTemplate: function (data) { var arr=[]; data.sprites.forEach(function (sprite) { arr.push(".icon."+sprite.name+ "{" + "background-image: url('/images/front/"+sprite.escaped_image+"');"+ "background-position: "+sprite.px.offset_x+" "+sprite.px.offset_y+";"+ "width:"+sprite.px.width+";"+ "height:"+sprite.px.height+";"+ "}\n"); }); return arr.join(""); } })) .pipe(gulp.dest('project/less/part')); });
task[del_old_icon]:删除旧的icon.png
gulp.task('del_old_icon',function(){ del(['./project/images/front/icon.png']); })
task[dist_icon]:移动新的icon.png到/image下
注:dist_icon执行前会先执行del_old_icon
gulp.task('dist_icon',['del_old_icon'],function(){ return gulp.src(['./project/less/part/icon.png') .pipe(gulp.dest('./project/images/front/')); })
task[del_dist]:删除dist目录
gulp.task('del_dist',function(){ del('./project/dist/'); })
整合任务以便调用执行
总的任务整合为两部分,一部分为雪碧图整合,另一部分为dist目录生成。
gulp.task('default',['dist_Less','dist_html','dist_js','dist_img']); gulp.task('sprite',['sprite_common']);
相关文章推荐
- String类的基本用法与注意点,StringBuffer类的用法
- Spring四种数据源配置
- mysql日志详细解析
- EntityFramework6写的数据访问框架之五事务
- Java编程思想第四版读书笔记——第七章 复用类
- 新版MATERIAL DESIGN 官方动效指南(二)
- c#.net 生成清晰缩略图
- 新版MATERIAL DESIGN 官方动效指南(二)
- 第k大(小)数,寻找最小的k个数(进一步要求顺序与原数组中元素顺序一致)
- 【Python】 sorted函数
- iOS和android游戏纹理优化和内存优化(cocos2d-x)
- (第3讲)简单排序:冒泡。选择。插入
- [leetcode] 【排序】 21. Merge Two Sorted Lists
- 一个二维码,苹果安卓两种下载方案
- iOS 开发中的各种证书简要说明
- 要嫁就嫁程序员,钱多话少死得早~
- 新版MATERIAL DESIGN 官方动效指南(一)
- 新版MATERIAL DESIGN 官方动效指南(一)
- nQLogViewer 查看BIEE日志
- LeetCode 346. Moving Average from Data Stream