'use strict';

    
    const gulp = require('gulp');
    const babel = require('gulp-babel');
    const less = require('gulp-less');
    const sourcemaps = require('gulp-sourcemaps');
    const webpack = require('webpack-stream');
    const autoprefixer = require('gulp-autoprefixer');
    const cleanCSS = require('gulp-clean-css');
    const uglify = require('gulp-uglify');
    const rename = require('gulp-rename');
    const jshint = require('gulp-jshint');
    const named = require('vinyl-named');
    const del = require('del');
    const runSequence = require('run-sequence');
    const argv = require('yargs').argv;
    
    /**
     * 開發(fā)環(huán)境為true，生產(chǎn)環(huán)境為false，默認(rèn)為true
     * 控制臺(tái)輸入 gulp [task] -p 或者 gulp [task] -d
     */
    const dev = argv.d || !argv.p;
    console.log('執(zhí)行' + (dev ? '開發(fā)環(huán)境' : '生產(chǎn)環(huán)境') + '編譯');
    
    
    gulp.task('webpack', function() {
      const config = {
        watch: true,
        output: {
          filename: "[name].bundle.js"
        },
        module: {
          rules: [
            // 加載vue
            {
              test: /\.vue$/,
              loader: 'vue-loader',
              options: {
                loaders: {
                  css: ['vue-style-loader', 'css-loader']
                },
              }
            }
          ],
        },
    
      };
    
    
    
      let result = gulp.src(['views/components/**/*.vue','views/components/*.vue'])
        .pipe(named())
        .pipe(webpack(config));
    
      return result
        .pipe(gulp.dest('views/scripts'));
    
    });
    
    gulp.task('css', function () {
      const AUTOPREFIXER_OPTIONS = {
        browsers: [
          'ie >= 10',
          'ie_mob >= 10',
          'ff >= 30',
          'chrome >= 34',
          'safari >= 7',
          'opera >= 23',
          'ios >= 7',
          'android >= 4.0',
          'bb >= 10'
        ],
        cascade: true,  //是否格式化屬性值 默認(rèn)：true
        remove:true     //是否去掉不必要的前綴 默認(rèn)：true
      };
    
      let result = gulp.src('views/styles/**/*.less')
        .pipe(less())
        .pipe(rename({suffix: '.min'}))
        // .pipe(sourcemaps.init())
        .pipe(autoprefixer(AUTOPREFIXER_OPTIONS));
    
      if (!dev) {
        console.log('正在壓縮css...');
        result.pipe(cleanCSS({
          advanced: false,        //類型：Boolean 默認(rèn)：true [是否開啟高級(jí)優(yōu)化（合并選擇器等）]
          compatibility: 'ie10',  //保留ie10及以下兼容寫法 類型：String 默認(rèn)：''or'*' [啟用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
          keepBreaks: true,       //類型：Boolean 默認(rèn)：false [是否保留換行]
          keepSpecialComments: '*'//保留所有特殊前綴 當(dāng)你用autoprefixer生成的瀏覽器前綴，如果不加這個(gè)參數(shù)，有可能將會(huì)刪除你的部分前綴
        }));
      }
    
      return result
      // .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('public/css'));
    });
    
    gulp.task('jshint', function () {
      return gulp.src(['views/scripts/**/*.js','!views/scripts/*.min.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
    });
    // 解析es6
    gulp.task('es5', function() {
      return gulp.src("views/scripts/es6/*.js")
            .pipe(babel({presets:['env']}))
            .pipe(gulp.dest("views/scripts/"))
    });
    gulp.task('js',['es5'], function() {
    
      const config = {
        output: {
          // path: "public/js",
          filename: "[name].min.js"
        },
    
        resolve: {
          alias: {
            'vue$': 'vue/dist/vue.common',
          }
        },
        devtool: 'source-map'
      };
    
      if (!dev) {
        //生產(chǎn)環(huán)境不聲稱sourcemap
        delete config.devtool;
      }
    
    
      let result = gulp.src(['views/scripts/*.js','views/scripts/*.bundle.js','!views/scripts/*.min.js'])
        .pipe(babel({
          presets: ['env']
        }))
        .pipe(named())
        .pipe(webpack(config));
    
      if (!dev) {
        console.log('正在壓縮js...');
        result.pipe(uglify());
      }
    
      return result
        .pipe(gulp.dest('public/js/'));
    });
    
    gulp.task('js-external',function () {
      return gulp.src('views/scripts/*.min.js')
        .pipe(gulp.dest('public/js/'));
    });
    
    gulp.task('img', function() {
      return gulp.src('views/styles/images/*')
        .pipe(gulp.dest('public/images/'));
    });
    
    gulp.task('font', function() {
      return gulp.src('node_modules/font-awesome/fonts/*')
        .pipe(gulp.dest('public/fonts'))
    });
    
    gulp.task('default', ['clean'], function(cb){
      runSequence(
        ['css', 'font', 'img'], //括號(hào)內(nèi)為可并行的任務(wù)
        'jshint',
        'webpack',
        'js',
        'js-external',
        cb
      );
    });
    
    gulp.task('clean', function() {
      del(['public/css/*', 'public/js/*', 'public/images/*', 'public/fonts/*'], {dot: true});
    });
    
    gulp.task('watch', function () {
      // IDE自動(dòng)編譯less，不需要watch
      gulp.watch('views/styles/**/*.less', ['css']);
    
      // gulp.watch('views/scripts/**/*.js', ['jshint', 'js']);
      gulp.watch('views/scripts/**/*.js', ['js']);
      gulp.watch('views/styles/**/*.png', ['img']);
      gulp.watch('views/styles/**/*.jpg', ['img']);
      gulp.watch('views/styles/**/*.svg', ['img']);
    });