gulp布局构建小结
一、工具选择
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_icongulp.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']);
gulp布局构建小结的更多相关文章
- 关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用
关于node.js和npm,cnpm的安装记录以及gulp自动构建工具的使用 工作环境:window下 在一切的最开始,安装node.js (中文站,更新比较慢http://nodejs.cn/) ...
- gulp进阶构建项目由浅入深
gulp进阶构建项目由浅入深 阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp. ...
- 基于Gulp + Browserify构建es6环境下的自动化前端项目
随着React.Angular2.Redux等前沿的前端框架越来越流行,使用webpack.gulp等工具构建前端自动化项目也随之变得越来越重要.鉴于目前业界普遍更流行使用webpack来构建es6( ...
- gulp自动化构建工具的使用
gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A. ...
- gulp 前端构建工具入门
gulp 前端构建工具入门 标签(空格分隔): gulp 1. 安装gulp npm i -g gulp 2. 创建gulp项目 2.1 Hello world 使用npm init初始化项目文件夹. ...
- gulp 自动化构建html项目--自动刷新
使用gulp自动化构建项目是前端学习的重要部分,gulp依赖于node.js.首选电脑要配置node和npm. 查看node版本号 node --version 查看npm 版本 npm --vers ...
- 使用ConstraintLayout(约束布局)构建响应式UI
使用ConstraintLayout(约束布局)构建响应式UI 转 https://www.300168.com/yidong/show-2740.html 核心提示:ConstraintLa ...
- gulp 前端构建工具使用
gulp 前端构建工具使用 1.新建一个web h5项目 2.准备好gulpfile.js文件 (1)下载链接:https://pan.baidu.com/s/116J-BaYOMRzeJW3i_J ...
- 应用gulp工具构建个自动算rem布局的小例子
因为最近可能需要做移动端rem布局,因为rem布局需要将px转化成rem,如果次都需要拿计算器算就太low了,所以就想到用less和gulp. 因为也是初学gulp,站点的文件结构还没想到太好,也只是 ...
随机推荐
- oracle vm中的xp添加共享文件夹
接着就可以在虚拟的电脑系统里面打开我们的共享文件夹,在桌面找到”网络邻居“,双击打开 我们需要通过”添加一个网络邻居“来加载我们刚才添加的”共享文件夹“,根据向导一步步执行 然后点击”浏览 ...
- Haskell语言学习笔记(44)Lens(2)
自定义 Lens 和 Isos -- Some of the examples in this chapter require a few GHC extensions: -- TemplateHas ...
- Haskell语言学习笔记(43)Parsec(2)
组合子 1 Prelude Text.Parsec Text.Parsec.String> parseTest (count 3 (char 'a')) "aaa" &quo ...
- DBA 招聘
数据库管理员(资深) 眼控科技 10-19万 72小时反馈 上海 6小时前 大专及以上 2年以上经验 普通话 25-35岁 绩效奖金 带薪年假 午餐补助 定期体检 年底双薪 五险一金 职位描述: 工作 ...
- TOMCAT下面发布项目的4种方式
摘要 TOMCAT下面发布项目的4种方式,可用于在平时资料查询. 第一种方法: 将web项目文件件拷贝到webapps 目录中:或者直接通过Eclipse发布到Tomcat上. 第二种方法: 在tom ...
- JAVA序列化和反序列化 对象<=>IO流 对象<=>字节数组
http://developer.51cto.com/art/201202/317181.htm http://blog.csdn.net/earbao/article/details/4691440 ...
- tcp连接需要注意的问题
当有子进程时,子进程终止时会返回SIGCHLD信号,默认忽略,此时会有僵尸进程. 处理方法: 捕获信号,并waitpid. 当慢系统调用被中断时(如信号中断),有些系统不会自动重启调用,此时系统调用可 ...
- python模块之time模块
import time #从1970年1月1号凌晨开始到现在的秒数,是因为这一年unix的第一个商业版本上市了,这个最常用# print(time.time()) # 1491574950.23983 ...
- SQL某时间段记录查询
--查询当天: select * from info where DateDiff(dd,datetime,getdate())=0 --查询24小时内的: select * from info wh ...
- iPhone iPad 各种控件默认高度
iPhone和iPad下各种常见控件的宽度和标准是一样的,所以这里就用iPhone说明. 以下是常见的几种控件的高度.Statusbar,Navigationbar和Tabbar的宽度极其图标大小. ...