Loading [Contrib]/a11y/accessibility-menu.js

年后的第一天简直无聊到爆炸了，所以写一篇文章来慢慢恢复工作状态吧
之前写过gulp和webpack来实现一些自动化的东西，但是两个各自有自己的优点，现在我的需求就是h5单页，用es6来写
gulp来实现实时监控文件的变化以及css相关处理
webpack则处理js

包依赖(package.json)

{
  "name": "gulp-temp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-concat": "^2.6.1",
    "gulp-cssnano": "^2.1.2",
    "gulp-less": "^3.3.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^6.2.0",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^2.0.0",
    "gulp-webpack": "^1.5.0",
    "postcss-px2rem": "^0.3.0",
    "webpack": "^1.14.0"
  }
}

配置文件

gulpfile.js

const gulp = require('gulp');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const less = require('gulp-less');
const concat = require('gulp-concat');
const autoprefixer= require('gulp-autoprefixer');
const postcss = require('gulp-postcss');
const px2rem= require('postcss-px2rem');
var webpack = require('gulp-webpack');
var webpackConfig = require('./webpack.config.js')
gulp.task('handelCSS', function(){
    return gulp.src('app/css/*.less')
        .pipe(less())
        .pipe(postcss([px2rem({remUnit: 64})]))
        .pipe(autoprefixer({
            browsers: [ '>5%'],
            cascade: false, //是否美化属性值 默认：true 像这样：
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认：true
        }))
        .pipe(concat('app.css'))
        .pipe(gulp.dest('dist/css'))
        .pipe(cssnano())
        .pipe(rename(function(path){
            path.basename += '.min';
        }))
        .pipe(gulp.dest('dist/css'));
})
gulp.task('html', function() {
    return gulp.src('app/*.html') // 指明源文件路径、并进行文件匹配
        .pipe(gulp.dest('dist')); // 输出路径
});
gulp.task('handelJS', function(){
    return gulp.src('app/js/*.js')
        .pipe(webpack( webpackConfig ))//重点
        .pipe(gulp.dest('dist/'))
})
// 监视文件变化，自动执行任务
gulp.task('watch', function(){
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/css/*.less', ['handelCSS']);
    gulp.watch('app/js/*.js', ['handelJS']);
})
gulp.task('start', ['handelJS', 'handelCSS', 'html']);
gulp.task('default',['start','watch']);

webpack.config.js

const path = require('path');
const webpack = require('webpack');
const ROOT_PATH = path.resolve(__dirname);
const APP_PATH = path.resolve(ROOT_PATH, 'app');
const BUILD_PATH = path.resolve(ROOT_PATH, 'dist');
module.exports = {
    entry: {
        app:APP_PATH+'/js/index.js',
    },
    output: {
        path: BUILD_PATH,
        publicPath: "./",
        filename: 'bundle.js'
    },
    plugins: [
        // new CleanPlugin('build'),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false,
            },
            sourceMap: true,
            except: ['$super', '$', 'exports', 'require'] //排除关键字
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
    ],
    module: {
        loaders: [
        
             {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: [ 'es2015']
                },
            }]
    }
}

实际项目

文化有深度

公众号 infefe

赞助