var gulp = require('gulp'),
    $ = require('gulp-load-plugins')(),
    connect = require('gulp-connect'),
    postcss = require('gulp-postcss'),
    avriables = require('postcss-css-variables'),
    precss = require('precss'),
    calc = require('postcss-calc'),
    autoprefixer = require('autoprefixer'),
    mediaDefine = require('postcss-custom-media'),
    mediaMerge = require('css-mqpacker'),
    sourcemaps =require('gulp-sourcemaps'),
    cssnano = require('gulp-cssnano'),
    rename = require('gulp-rename'),
    rev = require('gulp-rev'),
    del = require('del');
//server
 gulp.task('_connect',function(){
    connect.server({
        livereload:true,
        port:8011
    });
 });

//html
gulp.task('_html', function () {
  return gulp.src('./src/**/*.html')
    .pipe(connect.reload());
});

//css
gulp.task('_postcss',function(){
  var plugins = [
      avriables(),
      precss(),
      calc(),
      mediaMerge(),
      mediaDefine(),
      autoprefixer({
        browsers: ['last 4 version','Android >= 4.0'],
        cascade: false,//是否美化屬性,默認true
        remove: true//移除不必要的前綴
      }),
  ];
  return gulp.src(['./src/postcss/**/*.css','!./src/postcss/mf.css'])
  .pipe(sourcemaps.init())
  .pipe(postcss(plugins))
  .pipe(sourcemaps.write('../../maps'))
  .pipe(gulp.dest('./src/dist/css'))
  .pipe(connect.reload());
})

//css-static
gulp.task('_cssStatic',function(){
  var plugins = [
      avriables(),
      precss(),
      calc(),
      mediaMerge(),
      mediaDefine(),
  ];
  del('./src/dist/css/mf*.css');
  return gulp.src('./src/postcss/mf.css')
  .pipe(postcss(plugins))
  .pipe(cssnano())
  .pipe(rev())
  .pipe(rename({suffix:'.min'}))
  .pipe(gulp.dest('./src/dist/css'))
  .pipe(connect.reload());
})

//js
gulp.task('_babel',function(){
  return gulp.src('./src/es6/**/*.js')
  .pipe($.plumber())
  .pipe($.babel({
    presets: ['es2015']
  }))
  .pipe($.plumber.stop())
  .pipe($.uglify())
  .pipe(rename({suffix:'.min'}))
  .pipe(gulp.dest('./src/dist/js'))
  .pipe(connect.reload());
});

//watch
gulp.task('_watch', function () {
  gulp.watch(['./src/**/*.html'], ['_html']);
  gulp.watch(['./src/postcss/**/*.css'], ['_postcss']);
  gulp.watch('./src/postcss/mf.css', ['_cssStatic']);
  gulp.watch(['./src/es6/**/*.js'], ['_babel']);
});

//base64
gulp.task('_base64',function(){
  return gulp.src('./src/css/**/*.css')
  .pipe($.base64())
  .pipe(gulp.dest('./src/css'))
});

//圖片壓縮
gulp.task('_image',function(){
  return gulp.src('./src/img/**/*.{jpg,png,gif,ico}')
    .pipe($.imagemin())
    .pipe(gulp.dest('./src/img'))
});

//del
gulp.task('_del',function(){
    del('./src/dist');
});

//default
gulp.task('default', ['_connect', '_watch']);

{
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-preset-es2015": "^6.24.1",
    "css-mqpacker": "^6.0.1",
    "del": "^3.0.0",
    "fs": "^0.0.1-security",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-base64": "^0.1.3",
    "gulp-connect": "^5.0.0",
    "gulp-imagemin": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.0",
    "gulp-rename": "^1.2.2",
    "gulp-sourcemaps": "^1.12.0",
    "gulp-uglify": "^3.0.0",
    "jquery": "^3.2.1",
    "normalize.css": "^7.0.0",
    "postcss-calc": "^6.0.1",
    "postcss-custom-media": "^6.0.0",
    "precss": "^2.0.0"
  },
  "dependencies": {
    "gulp-cssnano": "^2.1.2",
    "gulp-rev": "^8.1.0",
    "postcss-css-variables": "^0.8.0"
  }
}