webpack、glup打包配置

// 1、webpack使用配置
var path = require('path');
var webpack = require('webpack');
 
module.exports = {
  /* 输入文件 */
  entry: {
    index:'./src/main.js'
  },
  output: {
    /* 输出目录,没有则新建 */
    path: path.resolve(__dirname, './dist'),
    /* 静态目录,可以直接从这里取文件 */
    publicPath: '/dist/',
    /* 文件名 */
    filename: 'build.js'
  },
  module: {
    rules: [
      /* 用来解析vue后缀的文件 */
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      /* 用babel来解析js文件并把es6的语法转换成浏览器认识的语法 */
      {
        test: /\.js$/,
        loader: 'babel-loader',
        /* 排除模块安装目录的文件 */
        exclude: /node_modules/
      },
      /*解析图片url*/
      {
        test: /\.(png|jpg|gif)$/,
        loader:'url-loader?limit=8192'
      },
      /*解析css*/
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(eot|woff|woff2|ttf|svg)$/,
        loader: 'url-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
  plugins : [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery"
    })
  ]
}
// 2、gulp使用配置
var gulp = require('gulp')
var jshint = require('gulp-jshint')
var sass = require('gulp-sass')
var concat = require('gulp-concat')
var uglify = require('gulp-uglify')
var rename = require('gulp-rename')

// 检查脚本
gulp.task('lint', function() {
    gulp.src('./js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

// 编译Sass
gulp.task('sass', function() {
    gulp.src('./scss/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'))
});

// 合并,压缩文件
gulp.task('scripts', function() {
    gulp.src('./js/*.js')
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'))
});

// 默认任务
gulp.task('default', function(){
    gulp.run('lint', 'sass', 'scripts')
    // 监听文件变化
    gulp.watch('./js/*.js', function(){
        gulp.run('lint', 'sass', 'scripts')
    })
});

  

  

posted @ 2017-10-10 15:27  鱿鱼须须  阅读(250)  评论(0编辑  收藏  举报