gulpfile.js 3.88 KB
var packageInfo = require('./package'),
    path = require('path'),
    gulp = require('gulp'),
    env = require('gulp-env'),
    sourcemaps = require('gulp-sourcemaps'),
    postcss = require('gulp-postcss'),
    gulpWebpack = require('webpack-stream'),
    webpack = require('webpack'),
    precss = require('precss'),
    cssnano = require('cssnano'),
    scss = require('postcss-scss'),
    atImport = require('postcss-import'),
    copy = require('postcss-copy'),
    pxtorem = require('postcss-pxtorem'),
    Imagemin = require('imagemin'),
    WebpackDevServer = require('webpack-dev-server');

var distDir = './dist/';

// 雪碧图待完善
var postcssPlugin = [atImport, precss, cssnano({
        autoprefixer: {
            add: true,
            browsers: ['> 1%']
        }
    }), copy({
        src: 'src/img',
        dest: path.join(distDir, 'img'),
        template: function(fileMeta) {
            return path.join(fileMeta.path, fileMeta.name + '-' + fileMeta.hash + '.' + fileMeta.ext);
        },

        relativePath: function() {
            return distDir + 'css';
        },

        transform: function(fileMeta) {

            // 图片自动压缩
            return new Promise(function(resolve, reject) {
                if (['jpg', 'png'].indexOf(fileMeta.ext) === -1) {
                    return fileMeta;
                }

                new Imagemin()
                    .src(fileMeta.contents)
                    .use(Imagemin.jpegtran({
                        progressive: true
                    }))
                    .run((err, files) => {
                        if (err) {
                            reject(err);
                        }

                        fileMeta.contents = files[0].contents;
                        resolve(fileMeta); // <- important
                    });
            });
        },

        ignore: 'sprites/**/*'
    })];

gulp.task('css', function() {
    return gulp.src('src/css/style.css', {
        base: 'src/css/'
    })
    .pipe(postcss(postcssPlugin, {
        syntax: scss
    }))
    .pipe(gulp.dest(distDir + '/css'));
});

gulp.task('css-dev', function() {
    return gulp.src('src/css/style.css', {
        base: 'src/css/'
    })
    .pipe(sourcemaps.init())
    .pipe(postcss(postcssPlugin, {
        syntax: scss
    }))
    .pipe(sourcemaps.write('../map'))
    .pipe(gulp.dest(distDir + '/css'));
});

gulp.task('webpack', function() {
    var envs = env.set({
        NODE_ENV: 'production'
    });

    return gulp.src('')
    .pipe(envs)
    .pipe(gulpWebpack(require('./webpack.config')))
    .pipe(envs.reset)
    .pipe(gulp.dest(distDir + '/js'));
});

// gulp.task('webpack-dev', function() {
//     return gulp.src('')
//     .pipe(gulpWebpack(Object.assign(require('./webpack.config'), {
//         watch: true
//     })))
//     .pipe(gulp.dest(distDir + '/js'));
// });

// gulp.task('webpack-dev-server', function() {
//     var webpackConfig = require('./webpack.config');
//
//     webpackConfig.output.path = path.join(__dirname, distDir + '/js');
//
//     // 热更新没搞定
//     // webpackConfig.entry.libs = ['webpack-dev-server/client?http://localhost:2222/', 'webpack/hot/dev-server'];
//     // webpackConfig.plugins = [new webpack.HotModuleReplacementPlugin()];
//
//     new WebpackDevServer(webpack(webpackConfig), {
//         hot: true,
//         stats: {
//             colors: true
//         },
//         publicPath: webpackConfig.output.publicPath,
//         contentBase: distDir,
//         watchOptions: {
//             aggregateTimeout: 200,
//             poll: 1000
//         }
//     }).listen(2222, 'localhost');
// });

gulp.task('ge', ['webpack', 'css']);

gulp.task('default', ['css-dev'], function() {
    gulp.watch('src/css/**/*.css', ['css-dev']);

    return gulp.src('')
    .pipe(gulpWebpack(Object.assign(require('./webpack.config'), {
        watch: true
    })))
    .pipe(gulp.dest(distDir + '/js'));
});