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_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‘]);
    

      

 

时间: 2024-10-09 11:54:51

gulp布局构建小结的相关文章

Web页面布局方式小结

事实上,本文是在Peter Jerde的How much information can be stored by ordering 52 playing cards文章基础上翻译.改编和扩展而来的.当然这是经过Jerde本人首肯的. 注意本文方法并非最优,也没有完全利用所有的信息空间,只是简单的尝试. 有数字的地方就有信息.所以扑克牌中保存信息不是什么新鲜事. PDF文档点这里:下载 原文(英文)点这里:访问 这里有两个DEMO. 编码DEMO,解码DEMO 首先是"DEEP IN SHALL

使用gulp+Browserify构建React应用

<一>.使用gulp构建React应用 一.React项目结构 .gulpfile.js ./src .index.html /js .App.js .Child.js .Parent.js 二.代码 index.html 和 js目录下的三个jsx文件如下 //index.html <!DOCTYPE html> <html> <head></head> <body> <div id="app">&l

gulp+webpack构建前端项目

本文将介绍如何利用gulp+webpack构建一个基本的前端项目.假设你已经安装了node环境并且会使用简单的命令行 1.gulp安装 (1)全局安装 npm install gulp -g (2)查看gulp是否安装成功 gulp -v (3)进入本地目录,新建gulpfile.js 2.安装gulp-webpack插件 基于gulp的插件非常多,建议大家查看npm官网https://www.npmjs.com (1)安装 webpack的用途主要是模块化+打包.安装敲入命令 npm inst

用户控件(.ascx)与&lt;ul&gt;&lt;li&gt;以及&lt;a&gt;布局之小结

用户控件(.ascx)与<ul><li>以及<a>布局 小结 一.用户控件(.ascx) 1.aspx是浏览器直接访问的页面,而ascx是用户控件,一般是用来重用. 比如:有2个aspx页面,有一部分代码一样,这里可以提取出来做成用户控件(ascx)就可以重用了. 如果单纯N个aspx页面,就只能复制粘贴,要修改时候就很麻烦了. 2.ascx不能直接访问,只能插入aspx页面呈现. 例如网站:页眉导航.页脚每个页都有,所以我们经常会将它们做成用户控件,然后每个页面引用进

gulp进阶构建项目由浅入深

阅读目录 gulp基本安装和使用 gulp API介绍 Gulp.src(globs[,options]) gulp.dest(path[,options]) gulp.task(name[,deps],fn); gulp.watch(glob[,opts],tasks) gulp一些常用插件 gulp-rename(重命名) gulp-uglify(JS压缩) gulp-minify-css(css文件压缩) gulp-minify-html(html压缩) gulp-concat(JS文件合

做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

gulp自动化构建工具的使用

gulp自动化构建工具: 把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!! 安装: 1.全局安装(全局安装一个gulp命令) A.下载安装: cnpm:cnpm i gulp -g 如果cnpm安装有问题:可使用yarn安装 yarn:   yarn global add gulp B.测试 gulp -v  2.本地安装(引入依赖模块,支持不同版本的项目运行) A.安装 a.创建一个新文件夹,初始化package.json

Gulp自动构建Web前端程序

这两天一个朋友在项目上碰到了一个这样的问题,在运营过程中,用户在浏览器上对某个表单进行数据提交时,需要引入新的平台接口数据的业务,通过评估,开发团队马上修改了相关后台代码和部分的前端脚本代码,通过简单测试并很快上线.当是上线后客户端的功能没有发生任何变化和修改前表现的状况是一样.遇到这样的问题,开发团队一时有点迷糊,明明是修改了功能并进行了部署却没有让用户使用到该功能,不知道该如何下手了. 有过一定前端开发经验的朋友应该知道这是浏览器缓存Web资源导致的问题,针对这样的实际问题,项目上应该有自己

gulp自动化构建工具

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/