gulp 使用案例

Posted 2020-09-08 jake-前端工程师

1、gulp 配置：

// 引入 gulp
var gulp = require(‘gulp‘);

var watch = require(‘gulp-watch‘), //导入所有gulp需要的模块
    spriter = require(‘gulp-css-spriter‘),
    spritesmith = require(‘gulp.spritesmith‘),
    imagemin = require(‘gulp-imagemin‘),
    pngquant = require("imagemin-pngquant"),
    base64 = require(‘gulp-base64‘),
    autoprefixer = require(‘gulp-autoprefixer‘),
    rename = require("gulp-rename"),
    cssmin = require(‘gulp-cssmin‘),
    connect = require(‘gulp-connect‘),
    concat = require(‘gulp-concat‘),
    uglify = require(‘gulp-uglify‘),
    less = require(‘gulp-less‘),
    sass = require(‘gulp-sass‘),
    uncss = require(‘gulp-uncss-sp‘),
    del = require(‘del‘),
    watchFile = (w_path, w_task) => {
        var chokidar = require(‘chokidar‘);
        chokidar.watch(w_path, { ignored: /[\/\\]\./ }).on(‘all‘, (event, path) => {
            console.log(event, path, ‘info‘);
            if (w_task == ‘scss‘ && event == ‘unlink‘) {
                del([‘./css/*.css‘])
            }
            gulp.run(w_task);
        });
    };

gulp.task(‘server‘, function() { //创建server
    connect.server({
        root: ‘./‘,
        port: 8088,
        livereload: true
    });
});


// 编译Sass
gulp.task(‘scss‘, function() {  //创建任务
    gulp.src([‘./scss/*.scss‘])
        .pipe(sass().on(‘error‘, sass.logError))
        .pipe(autoprefixer({
            browsers: [‘last 6 Chrome versions‘, ‘last 3 Safari versions‘, ‘ios >= 5‘, ‘android >= 4.0‘],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(cssmin())
        .pipe(gulp.dest(‘./css‘))
        .pipe(connect.reload());
});

gulp.task(‘less‘, function() {
    gulp.src([‘./less/*.less‘])
        .pipe(less())
        .pipe(autoprefixer({
            browsers: [‘last 6 Chrome versions‘, ‘last 4 Explorer versions‘, ‘Firefox ESR‘, ‘last 2 Explorer versions‘, ‘iOS >= 5‘, ‘Android >= 4.0‘, ‘> 5%‘],
            cascade: true, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove: true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(cssmin())
        .pipe(gulp.dest(‘./css‘))
        .pipe(connect.reload());
});

gulp.task(‘uncss‘, function() {
    return gulp.src(‘css/*.css‘)
        .pipe(uncss({
            html: [‘*.html‘]
        }))
        .pipe(gulp.dest(‘./css‘));
});

gulp.task(‘cssmin‘, function() {
    gulp.src([‘./css/*.css‘])
        .pipe(cssmin())
        .pipe(gulp.dest(‘./css‘));
});


// 监听任务
gulp.task(‘watch‘, function() {
    /* gulp.watch(‘*.html‘, [‘html‘]); */ // 监听根目录下所有.html文件
    gulp.watch(‘./scss/*.scss‘, [‘scss‘]);
});
gulp.task(‘watchIcon‘, function() {
    watchFile(‘./img/icon/‘, ‘icon2‘)
});
gulp.task(‘watchScss‘, function() {
    watchFile(‘./scss/‘, ‘scss‘)
});


// 默认任务
gulp.task(‘default‘, [‘server‘, ‘watchIcon‘, ‘watchScss‘]);

gulp.task(‘sprite‘, function() {

    var timestamp = +new Date();
    //需要自动合并雪碧图的样式文件
    return gulp.src(‘./scss/*.scss‘)
        .pipe(spriter({
            // 生成的spriter的位置
            ‘spriteSheet‘: ‘./img/‘ + timestamp + ‘.png‘,
            // 生成样式文件图片引用地址的路径
            // 如下将生产：backgound:url(../images/sprite20324232.png)
            ‘pathToSpriteSheetFromCSS‘: ‘../img/‘ + timestamp + ‘.png‘
        }))
        //产出路径
        .pipe(gulp.dest(‘./test‘));
});


gulp.task(‘icon2‘, function() {
    return gulp.src(‘./img/icon/*.png‘) //需要合并的图片地址
        .pipe(spritesmith({
            imgName: ‘img/sprite.png‘, //保存合并后图片的地址
            cssName: ‘scss/comm/icon.scss‘, //保存合并后对于css样式的地址
            padding: 20, //合并时两个图片的间距
            algorithm: ‘binary-tree‘, //注释1
            cssTemplate: function(data) {
                var arr = [];
                data.sprites.forEach(function(sprite) {
                    var $width = parseInt(sprite.px.width);
                    var $height = parseInt(sprite.px.height);
                    var $ofx = parseInt(sprite.px.offset_x);
                    var $ofy = parseInt(sprite.px.offset_y);
                    var $tw = sprite.total_width;
                    var $th = sprite.total_height;
                    arr.push(".icon-" + sprite.name +
                        "{" +
                        "background-image: url(" + sprite.escaped_image + ");" +
                        "background-position: " + $ofx + "px " + $ofy + "px;" +
                        "width:" + $width + "px;" +
                        "height:" + $height + "px;" +
                        "background-size:" + $tw + "px " + $th + "px;" +
                        "background-repeat:" + "no-repeat;" +
                        "display:" + "inline-block;" +
                        "}\n");
                });
                return arr.join("");
            }
        }))
        .pipe(gulp.dest(‘./‘));
});
gulp.task(‘imagemin‘, function() {
    return gulp.src(‘./img/ft/*.{png,jpg,gif,ico}‘)
        .pipe(imagemin({
            optimizationLevel: 5,
            progressive: true,
            multipass: true,
            use: [pngquant({
                quality: ‘50-70‘
            })]
        }))
        .pipe(gulp.dest(‘./img/‘))
});



gulp.task(‘base‘, [‘sass‘], function() {
    return gulp.src(‘./scss/_reset.scss‘)
        .pipe(base64({
            baseDir: ‘xgou‘,
            extensions: [‘png‘],
            maxImageSize: 20 * 1024,
            debug: false
        }))
        .pipe(gulp.dest(‘./scss/‘));
});

2、package.json:

{
  "devDependencies": {
    "del": "^2.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "*",
    "gulp-base64": "*",
    "gulp-concat": "*",
    "gulp-connect": "*",
    "gulp-css-spriter": "*",
    "gulp-cssmin": "*",
    "gulp-imagemin": "*",
    "gulp-less": "*",
    "gulp-livereload": "*",
    "gulp-rename": "*",
    "gulp-sass": "*",
    "gulp-uglify": "*",
    "gulp-uncss-sp": "^0.0.1",
    "gulp-watch": "*",
    "gulp-webserver": "*",
    "gulp.spritesmith": "*",
    "imagemin-pngquant": "*",
    "node-sass": "*",
    "spritesmith": "*"
  }
}