gulp前端自动化部署方案

林氏智造 于 2016-11-22 发布 3586 人已阅

空闲时间使用gulp根据自己的项目需求编写了一套前端自动化部署方案,包括压缩合并css,压缩合并js,雪碧图,版本号插入等功能。

代码

var gulp = require('gulp'),
    minifycss = require('gulp-minify-css'),
    concat = require('gulp-concat'),
    uglify = require('gulp-uglify'),
    rename = require('gulp-rename'),
    notify = require('gulp-notify'),
    cache = require('gulp-cache'),
    del = require('del'),
    processhtml=require('gulp-processhtml'),
    spritesmith = require('gulp.spritesmith'),
    livereload = require('gulp-livereload'),
    rev=require('gulp-rev'),
    revCollector=require('gulp-rev-collector'),
    gulpSequence=require('gulp-sequence'),
    clean=require('gulp-clean'),
    imagemin = require('gulp-imagemin');

//基础参数
var params = {
    spriteSrc: 'src/sprite/',
    imgSrc: 'src/img/',
    cssSrc: 'src/css/',
    jsSrc: 'src/js/',
    distSrc: 'dist/',
    pageSrc: 'page/',
    recSrc: 'dist/manifest/',
    commonCss:[
        'library/jqweui/lib/weui.min.css',
        'library/jqweui/css/jquery-weui.min.css',
        'src/css/app.css',
        'src/css/sprite.css'
    ],
    commonJs:[
        'src/js/common.js'
    ]
};

//每个页面配置
var pageInfo = [
    {
        name: 'index',
        cssSrc: [
            params.cssSrc + 'index.css'
        ],
        jsSrc: [
            params.jsSrc + 'index.js'
        ],
        distCssName: 'index.css',
        distJsName: 'index.js'
    },
    {
        name: 'list',
        cssSrc: [
            params.cssSrc + 'list.css'
        ],
        jsSrc: [
            params.jsSrc + 'list.js'
        ],
        distCssName: 'list.css',
        distJsName: 'list.js'
    }
];

//清空dist
gulp.task('clean', function(cb) {
    return gulp.src(params.distSrc+'*',{read:false})
               .pipe(clean());
});

//压缩css
gulp.task('minifycss', function() {
    for(var i = 0; i < pageInfo.length; i++) {
       var item = pageInfo[i];
       gulp.src(params.commonCss.concat(item.cssSrc))
            .pipe(concat(item.distCssName))
            .pipe(minifycss())  //执行压缩
            .pipe(rev())
            .pipe(gulp.dest(params.distSrc + 'css'))
            .pipe(rev.manifest(item.name + '-css.json', {merge:true}))
            .pipe(gulp.dest(params.distSrc + 'manifest'))
            .pipe(livereload());
    }
    return;
});

//压缩js
gulp.task('minifyjs', function() {

    for(var i = 0; i < pageInfo.length; i++) {

        var item = pageInfo[i];
        gulp.src(params.commonJs.concat(item.jsSrc))
            .pipe(concat(item.distJsName))
            .pipe(uglify())  //执行压缩
            .pipe(rev())
            .pipe(gulp.dest(params.distSrc + 'js'))
            .pipe(rev.manifest(item.name + '-js.json', {merge:true}))
            .pipe(gulp.dest(params.distSrc + 'manifest'));
    }
    return;
});

//压缩图片
gulp.task('minifyimg', function() {
  return gulp.src(params.imgSrc + '**/*')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest(params.distSrc + 'img'));
});

//雪碧图生成器
gulp.task('sprite', function () {
    var spriteData = gulp.src(params.spriteSrc + '*.png').pipe(spritesmith({
        imgName: 'sprite.png',
        cssName: 'sprite.css',
        padding: 5,
        retinaSrcFilter: [params.spriteSrc + '*@2x.png'],
        imgName: 'sprite.png',
        imgPath: '../img/common/sprite.png',
        retinaImgName: 'sprite@2x.png',
        retinaImgPath: '../img/common/sprite@2x.png'
    }));
    spriteData.img.pipe(gulp.dest(params.imgSrc + 'common/'));
    return spriteData.css.pipe(gulp.dest(params.cssSrc));
});

//把Html中多个文件合并成指定文件
gulp.task('htmlProc',function(){

    return gulp.src(params.pageSrc+'*.html')
        .pipe(processhtml())
        .pipe(gulp.dest(params.distSrc));

});

//替换html版本号
gulp.task('htmlRev',function(){

    return gulp.src([params.recSrc+'*.json',params.distSrc+'*.html'])
            .pipe(revCollector({
                replaceReved: true
            }))
            .pipe(gulp.dest(params.distSrc));

});

gulp.task('default',function(cb){
    gulpSequence('clean','sprite',['minifyimg','minifycss','minifyjs'],'htmlProc',cb);
});

标签

您可能感兴趣的文章

如何优雅的选择字体(font-family)

当前项目对字体要求很高,之前对font-family这个属性没怎么仔细去研究它,现在整理了一个通用方案适合大多数网站使用。

React+webpack 部署概要

React+webpack 组合已经成为开发react的经典搭配,把常用的webpack配置文件和一些react的常用代码规范记录下方便以后开发使用

纯CSS制作各种图形

用图片做图标会加大页面的大小,现在能用CSS写图标就用CSS写,维护起来也方便加载速度也快