gulp配置零碎筆記

一、gulp生成雪碧圖

//生成sprites圖片和樣式表

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

var spriteData = gulp.src('./src/img/icon/*.png').pipe(spritesmith({

imgName: 'sprite.png',

cssName: 'sprite.css',

imgPath: '../img/sprite.png',

padding:5

}))

.pipe(gulpif('*.png', gulp.dest('./dist/img/')))

.pipe(gulpif('*.css', gulp.dest('./dist/css/')))

return spriteData

});

 二、gulp完成配置

(function () {
    'use strict';
    const gulp = require('gulp');
    const chalk = require('chalk');
    const changed = require('gulp-changed'); // 只編譯改動過的文件
    const sass = require('gulp-sass'); // 編譯sass
    const sourcemaps = require('gulp-sourcemaps');
    const fileinclude = require('gulp-file-include');
    const autoprefixer = require('gulp-autoprefixer'); // css瀏覽器前綴補全
    const cleancss = require('gulp-clean-css'); // 壓縮css
    const rename = require('gulp-rename'); // 文件重命名
    const uglify = require('gulp-uglify'); // 壓縮js
    const babel = require('gulp-babel');  //es6轉義
    const imagemin = require('gulp-imagemin'); // 壓縮圖片
    const cache = require('gulp-cache'); // 只壓縮修改的圖片
    const concat = require("gulp-concat"); // 合併文件
    const plumber = require('gulp-plumber'); //阻止gulp進程中斷
    const jshint = require("gulp-jshint"); //檢驗代碼
    const del = require('del');
    const path = require('path');
    const gulpif = require('gulp-if');
    const sequence = require('gulp-sequence');
    const spritesmith=require('gulp.spritesmith');//生成sprites圖片和樣式表
    const browserSync = require('browser-sync').create(); // 靜態服務器
    const reload = browserSync.reload;
    const proxyMiddleware = require('http-proxy-middleware');

    const fontSpider = require('gulp-font-spider'); //字蛛
    const Config = require('./gulpfile.config.js'); //路徑配置文件


    const env = process.env.NODE_ENV || 'development'
    const condition = env === 'production'

    function cbTask(task) {
        return new Promise((resolve, reject) => {
          del(['./dist/**'])
            .then(paths => {
              console.log(chalk.green(`
            -----------------------------
              Clean tasks are completed
            -----------------------------`))
              sequence(task, () => {
                console.log(chalk.green(`
              -----------------------------
                All tasks are completed
              -----------------------------`))
                resolve('completed')
              })
            })
        })
      }
    // font字體處理
    gulp.task('font', function () {
        return gulp
            .src(Config.font.src)
            .pipe(changed(Config.font.dist))
            .pipe(gulp.dest(Config.font.dist));
    });

    // HTML處理
    gulp.task('html', function () {
        return gulp
            .src(Config.html.src)
            .pipe(fileinclude({
                prefix: '@@',//變量前綴 @@include
                basepath: './src/include/',//引用文件路徑
                indent: true//保留文件的縮進
            }))
            // .pipe(changed(Config.allhtml.dist))
            //.pipe(fontSpider())  //字體轉換
            .pipe(gulp.dest(Config.html.dist));
    });
    // SASS樣式處理
    gulp.task('sass', function () {
        return gulp
            .src(Config.sass.src)
            .pipe(gulpif(!condition,sourcemaps.init()))
            // .pipe(sourcemaps.init())
            .pipe(plumber())
            .pipe(sass({
                outputStyle: 'expanded'
            }).on('error', sass.logError))
            .pipe(autoprefixer({
                browsers: ['last 4 versions',
                    'Android >= 4',
                    'Chrome >= 20',
                    'Firefox >= 24',
                    'Explorer >= 8',
                    'iOS >= 6',
                    'Opera >= 12',
                    'Safari >= 6'
                ],
                cascade: true, //美化屬性，默認true
                add: true, //是否添加前綴，默認true
                remove: true, //刪除過期前綴，默認true
                flexbox: true //爲flexbox屬性添加前綴，默認true
            }))
            .pipe(gulpif(condition, cleancss({
                debug: true
            })))
            // .pipe(cleancss())
            .pipe(gulpif(!condition,sourcemaps.write('./maps')))
            .pipe(gulp.dest(Config.sass.dist))
            .pipe(reload({ stream: true }));
    });

    // CSS樣式處理
    gulp.task('css', function () {
        return gulp
            .src(Config.css.src)
            .pipe(autoprefixer({
                browsers: ['last 4 versions',
                    'Android >= 4',
                    'Chrome >= 20',
                    'Firefox >= 24',
                    'Explorer >= 8',
                    'iOS >= 6',
                    'Opera >= 12',
                    'Safari >= 6'
                ]
            }))
            .pipe(gulpif(condition, cleancss({
                debug: true
            })))
            .pipe(gulp.dest(Config.css.dist))
            .pipe(reload({ stream: true }));
    });
    //生成sprites圖片和樣式表
    gulp.task('sprite', function () {
      var spriteData = gulp.src('./src/img/icon/*.png').pipe(spritesmith({
          imgName: 'sprite.png',
          cssName: 'sprite.css',
          imgPath: '../img/sprite.png',
          padding:5
      }))
      .pipe(gulpif('*.png', gulp.dest('./dist/img/')))
      .pipe(gulpif('*.css', gulp.dest('./dist/css/')))
      return spriteData
    });
    // 編譯js
    gulp.task('js', function () {
        return gulp
            .src(Config.js.src)
            .pipe(babel({
                presets: ['env']
            }))
            .pipe(jshint())
            .pipe(jshint.reporter('default'))
            .pipe(changed(Config.js.dist))
            .pipe(gulp.dest(Config.js.dist))
            .pipe(reload({ stream: true }))
            //.pipe(concat(Config.js.build_name))
            //.pipe(gulp.dest(Config.js.dist))
            // .pipe(uglify())
            .pipe(gulpif(condition, uglify()))
            .pipe(gulpif(condition,rename(function (path) {
                path.basename += '.min';
                path.extname = '.js';
            })))
            // .pipe(rename(function (path) {
            //     path.basename += '.min';
            //     path.extname = '.js';
            // }))
            .pipe(gulp.dest(Config.js.dist));
    });
    // 編譯第三方插件js
    gulp.task('staticjs', function () {
        return gulp
            .src(Config.staticjs.src)
            // .pipe(jshint())
            // .pipe(jshint.reporter('default'))
            .pipe(changed(Config.staticjs.dist))
            .pipe(gulp.dest(Config.staticjs.dist))
            .pipe(reload({ stream: true }))
    });
    // 圖片處理
    gulp.task('img', function () {
        return gulp
            .src(Config.img.src)
            .pipe(changed(Config.img.dist))
            .pipe(cache(imagemin([
                imagemin.gifsicle({
                    interlaced: true
                }),
                imagemin.jpegtran({
                    progressive: true
                }),
                imagemin.optipng({
                    optimizationLevel: 5
                }),
                imagemin.svgo({
                    plugins: [{
                        removeViewBox: true
                    }]
                })
            ])))
            .pipe(gulp.dest(Config.img.dist))
            .pipe(reload({ stream: true }));
    });

    let middleware = proxyMiddleware('/api', {
        target: 'http://wh.xhd.cn', 
        // target: 'http://192.168.16.181:8080',
        changeOrigin: true,
        pathRewrite: {
            '^/api': '/api'
        }
    });

    // 靜態服務器
    gulp.task('run', function () {
        browserSync.init({
            port: 888,
            server: {
                baseDir: Config.dist,
                middleware: middleware
            },
            // browser: '',
            // open: false,
            injectChanges: true // 注入CSS改變
        });
        
        // gulp.watch(Config.html.src, ['html']).on('change', reload);
        gulp.watch(Config.allhtml.src, ['html']).on('change', reload);
        gulp.watch(Config.font.src, ['font']);
        gulp.watch(Config.css.src, ['css']);
        gulp.watch(Config.sass.src, ['sass']);
        gulp.watch(Config.js.src, ['js']);
        gulp.watch(Config.staticjs.src, ['staticjs']);
        // gulp.watch(Config.includeHtml.src, ['html']).on('change', reload);

        gulp.watch('src/img/**/*', ['img','sprite']);
    });

    // gulp.task('default', ['html', 'css', 'font', 'sass', 'js', 'img', 'run','staticjs']);
    gulp.task('server', () => {
        const task = ['html', 'css', 'font', 'sass', 'js', 'img', 'staticjs','sprite']
        cbTask(task).then(() => {
        //   browserSync.init(config.server)
          console.log(chalk.cyan('  Server complete.\n'))
          gulp.start('html')
          gulp.start('run')
        })
      })
      gulp.task('build', () => {
        const task = ['html', 'css', 'font', 'sass', 'js', 'img', 'staticjs','sprite']
        cbTask(task).then(() => {
            console.log(chalk.cyan('  Build complete.\n'))
            gulp.start('html')
        })
      })
      gulp.task('default', () => {
        console.log(chalk.green(
          `
        Build Setup
          開發環境： npm run dev
          生產環境： npm run build
          `
        ))
      })
})();

package.json裏設置以下

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "gulp server",
    "build": "cross-env NODE_ENV=production gulp build"
  },