Gulp

gulpfile.js

/*******************
 * Author: Mark24
 * Mail: [email protected]
 * Github: Mark24Code
 * Date: 2017/08/01
 *******************/

/*******************
 * Gulp依赖
 *******************/
var

    gulp = require('gulp'),
    gulpif = require('gulp-if'), //gulp pipe控制流
    fs = require('fs'),
    path = require('path'),
    mkdirp = require('mkdirp'),
    touch =require('touch'),
    del = require('del'), //删除文件
    rename = require('gulp-rename'), //改名
    changed = require('gulp-changed'), //只修改修改过的文件

    sass = require('gulp-sass'),

    sourcemaps = require('gulp-sourcemaps'), //sourcemaps
    cssmin = require('gulp-cssmin'), //压缩css
    autoprefixer = require('gulp-autoprefixer');

    uglify = require('gulp-uglify'), //压缩js
    babel = require('gulp-babel'), //转换js
    concat = require('gulp-concat'), //合并js

    imagemin = require('gulp-imagemin'), //imagemin 图片压缩
    pngquant = require('imagemin-pngquant'), //深度度压缩 png

    spritesmith = require('gulp.spritesmith'), //雪碧图处理

    connect = require('gulp-connect') //webserver
;
/*******************
 * 全局配置
 *******************/

var config = {
    autoprefix: ['ie >= 6','Firefox >= 20', 'Chrome >= 20', '>= 5%'],
    babel: {
        presets: ['es2015']
    },
    merge_js: false,
    compress_js: false,
    compress_css: false,
    src: {
        path: 'src',
        js: 'src/js',
        css: 'src/css',
        scss: 'src/scss',
        images: 'src/images',
        sprite: ['icons']
    },
    build: {
        path: 'build',
        js: 'build/js',
        css: 'build/css',
        images: 'build/images'
    }
};

/*******************
 * 任务
 *******************/
//init
gulp.task('init',function(){
    var dirs = [];
    for(var key in config.src){
        if(key!=='sprite'){
            dirs.push(config.src[key])
        }
    }
    dirs.forEach(function(dir){
        console.log('DIR:'+dir);
        mkdirp.sync(dir);
    });
    touch.sync(config.src.path+'/index.html');
    console.log('FILE:'+config.src.path+'/index.html');
    console.log('[OK] init success!');
});

//html处理
gulp.task('html', function() {
    return gulp.src(config.src.path + '/**/*.html')
        .pipe(gulp.dest(config.build.path));
});

// sass 处理
gulp.task('scss', function() {
    return gulp.src(config.src.scss + '/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: config.autoprefixer,
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(gulp.dest(config.src.css))
        .on('end', function() {
            console.log('[完成] sass 编译完毕');
        });
});

//css处理
gulp.task('css', function() {
    return gulp.src(config.src.css + '/**/*.css')
        .pipe(gulpif(config.compress_css, cssmin()))
        .pipe(gulpif(config.compress_css, rename({ suffix: '.min' })))
        .pipe(gulp.dest(config.build.css));
});


//javascript处理
gulp.task('js', function() {
    var uglify_options = {
        preserveComments: 'license'
    };

    return gulp.src(config.src.js + '/**/*.js', !(config.src.js + '/**/*.min.js'))
        .pipe(babel(config.babel))
        .pipe(gulpif(config.compress_js, uglify(uglify_options)))
        .pipe(gulpif(config.merge_js, concat("main.js")))
        .pipe(gulpif(config.compress_js, rename({ suffix: '.min' })))
        .pipe(gulp.dest(config.build.js));

});


//images处理
gulp.task('images', function() {
    var imagemin_options = {
        progressive: true, // 无损压缩JPG图片
        svgoPlugins: [{
            removeViewBox: false
        }], // 不要移除svg的viewbox属性
        use: [pngquant()] // 深度压缩PNG
    };
    return gulp.src(config.src.images + '/**/*')
        .pipe(imagemin(imagemin_options))
        .pipe(gulp.dest(config.build.images));

});


//spirte图
function compileSprite(imgFolder) {
    var spriteConfig = {
        spriteSource: config.src.images + '/' + imgFolder + '/*.png',
        spriteSmithConfig: {
            imgName: imgFolder + '.png',
            cssName: '_' + imgFolder + '.scss',
            algorithm: 'binary-tree',
            padding: 5
        }
    };
    var spriteData = gulp.src(spriteConfig.spriteSource)
        .pipe(spritesmith(spriteConfig.spriteSmithConfig));
    console.log('[sprite] compile sprites...');
    spriteData.img.pipe(gulp.dest(config.src.images));
    spriteData.css.pipe(gulp.dest(config.src.scss))
        .on('end', function() {
            console.log('[ok] compile sprites finished.')
        });
}

gulp.task('sprite', function() {
    config.src.sprite.filter(function(item) {
        compileSprite(item);
    });
});


//本地服务
gulp.task('reload_html', function() {
    gulp.src(config.src.path)
        .pipe(connect.reload());
});

var server_option = {
    host: '0.0.0.0',
    port: 8000,
    livereload: true
};

gulp.task('server:dev', function() {
    server_option.root = config.src.path;
    connect.server(server_option);
});

gulp.task('server:build', function() {
    server_option.root = config.build.path;
    connect.server(server_option);
});

gulp.task('server', ['server:dev']);


//监视
gulp.task('watch', function() {
    gulp.watch(config.src.path + '/**/*.html', ['reload_html']);
    gulp.watch(config.src.scss + '/**/*.scss', ['scss', 'reload_html']);
    gulp.watch(config.src.css + '/**/*.css', ['reload_html']);
    gulp.watch(config.src.js + '/**/*.js', ['reload_html']);
    gulp.watch(config.src.images + '/**/*', ['reload_html']);
});


//清理环境
gulp.task('clean:build', function(cb) {
    del.sync([
        config.build.path + '**/*'
    ], cb);
});

gulp.task('clean', ['clean:build']);


//开发
gulp.task('dev', ['server', 'watch']);


//打包发布
gulp.task('build', ['clean:build', 'images', 'css', 'js', 'html']);


//帮助
gulp.task('help', function() {
    console.log('----------- gulp命令 -----------');
    console.log('gulp               命令清单');
    console.log('----------- 开发环境 -----------');
    console.log('gulp init          初始化');
    console.log('gulp html          移动html');
    console.log('gulp css           处理css');
    console.log('gulp js            处理js');
    console.log('gulp images        图片压缩');
    console.log('gulp sprite        生成雪碧图');
    console.log('----------- 发布环境 -----------');
    console.log('gulp dev           开发模式');
    console.log('gulp build         打包发布');
    console.log('----------- 快捷工具 -----------');
    console.log('gulp clean         清理dev和build文件夹');
    console.log('gulp clean:build   清理build文件夹');
    console.log('gulp server        开发server');
    console.log('gulp server:dev    开发server');
    console.log('gulp server:build  打包server');
    console.log('-------------------------------');
});


//默认任务
gulp.task('default', ['help']);

package.json

{
  "name": "gulpper",
  "version": "1.0.0",
  "description": "gulp for web dev",
  "main": "gulpfile.js",
  "private": true,
  "dependencies": {},
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "browserify": "^14.3.0",
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^6.1.2",
    "gulp-changed": "^2.0.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-html-replace": "^1.6.2",
    "gulp-if": "^2.0.2",
    "gulp-imagemin": "^3.2.0",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.1.0",
    "gulp-sourcemaps": "^2.6.0",
    "gulp-uglify": "^2.1.2",
    "gulp-webserver": "^0.9.1",
    "gulp.spritesmith": "^6.4.0",
    "imagemin-pngquant": "^5.0.0",
    "mkdirp": "^0.5.1",
    "postcss-flexadapter": "^1.0.1",
    "touch": "^3.1.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Mark24",
  "license": "MIT"
}