gulp布局构建小结

Posted 2020-07-27

一、工具选择
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‘]);