zoukankan      html  css  js  c++  java
  • 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+";"+
                          ""+sprite.px.width+";"+
                          "height:"+sprite.px.height+";"+
                          "}
      ");
                      });
                      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']);
      

        

     

  • 相关阅读:
    linux权限补充:rwt rwT rws rwS 特殊权限
    关于Linux操作系统下文件特殊权限的解释
    Java学习笔记——Java程序运行超时后退出或进行其他操作的实现
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 判断名次
    Java实现 蓝桥杯 算法提高 日期计算
    Java实现 蓝桥杯 算法提高 日期计算
    Java实现 蓝桥杯 算法提高 概率计算
    Java实现 蓝桥杯 算法提高 概率计算
    Java实现 蓝桥杯 算法提高 复数四则运算
  • 原文地址:https://www.cnblogs.com/marunzhou/p/5599488.html
Copyright © 2011-2022 走看看