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') }) });