前端Gulp对SCSS,JS的处理

var gulp = require('gulp');
var staticHash = require('gulp-static-hash');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var gulpSequence = require('gulp-sequence');
var assetRev = require('gulp-asset-rev');
var runSequence = require('run-sequence');
var rev = require('gulp-rev');
var revCollector = require('gulp-rev-collector');
var babel = require('gulp-babel');
var htmlmin = require('gulp-htmlmin');
var sass = require('gulp-sass'); // 编译scss 为 css
var  sass  =  require ( 'gulp-sass' ) ( require ( 'sass' ) ) ;
var cleanCss = require('gulp-clean-css'); // css压缩

 
  //定义css、js文件路径，是本地css,js文件的路径，可自行配置
  var cssSrc = '../css/admin/**/*.css',   
  jsSrc = 'public/static/**/*.js'

 //为css中引入的图片/字体等添加hash编码

gulp.task('assetRev', function(){
      return gulp.src(cssSrc)  //该任务针对的文件
      .pipe(assetRev()) //该任务调用的模块
      .pipe(gulp.dest('public/static/src/css'));
});
//CSS生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revCss', function(){
    return gulp.src(cssSrc)
    .pipe(rev())
    .pipe(rev.manifest({meger: true}))
    .pipe(gulp.dest('public/staticEdit/rev/css'));
})
//js生成文件hash编码并生成 rev-manifest.json文件名对照映射

gulp.task('revJs', function(){
    return gulp.src(jsSrc)
    .pipe(rev())
    .pipe(rev.manifest({meger: true}))
    .pipe(gulp.dest('public/staticEdit/rev/js'));
});

//Html替换css、js文件版本
gulp.task('revHtml', function() {
    return gulp.src(['public/staticEdit/rev/**/*.json','public/html/**/*.html']) // 这里的View/*.html是项目html文件路径，如果gulpfile.js和html文件同在一级目录下，修改为return gulp.src(['rev/**/*.json', '*.html']);
    .pipe( revCollector({
            replaceReved: true
        }))
    .pipe(gulp.dest(function(file){
      return file.base;
    }));// 注意这里是生成的新的html文件，如果设置为你的项目html文件所在文件夹，会覆盖旧的html文件，若上面的View/*.html修改了，这里也要相应修改，如果gulpfile.js和html文件同在一级目录下，修改为  .pipe(gulp.dest(''));

});


gulp.task('jsAdmin',function() {
  return gulp.src('public/staticEdit/admin/build/*.js') //取文件
  .pipe(uglify())
  .pipe(gulp.dest('public/static/admin/js/'))//导出
})

gulp.task('jsFront',function() {
  return gulp.src('public/staticEdit/front/build/*.js') //取文件
  .pipe(uglify())
  .pipe(gulp.dest('public/static/front/js/'))//导出
})

gulp.task('es6',  () => {
  return gulp.src('public/staticEdit/front/modules/*.js')
    .pipe(babel())
    .pipe(gulp.dest('public/staticEdit/front/build'));
});
gulp.task('es6Admin',  () => {
  return gulp.src('public/staticEdit/admin/modules/*.js')
    .pipe(babel())
    .pipe(gulp.dest('public/staticEdit/admin/build'));
});

gulp.task('html',function(){
  var options = {
    collapseWhitespace:true,
    collapseBooleanAttributes:true,
    removeComments:true,
    removeEmptyAttributes:true,
    removeScriptTypeAttributes:true,
    removeStyleLinkTypeAttributes:true,
    minifyJS:true,
    minifyCSS:true
  };

  gulp.src('public/htmlEdit/**/*.html')
  .pipe(htmlmin(options))
  .pipe(gulp.dest('public/html'));
});
//sass转成css1
gulp.task('sass',  () => {
  return gulp.src('./public/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./public/css'));
});
// css压缩1
gulp.task('css',  () => {
  return gulp.src('./public/css/*.css')
    .pipe(cleanCss())
    .pipe(gulp.dest('./public/css'));
});
//sass转成css2
gulp.task('sassAdmin',  () => {
  return gulp.src('./public/UI-admin/sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./public/css/admin'));
});
// css压缩2
gulp.task('cssAdmin',  () => {
  return gulp.src('./public/css/admin/*.css')
    .pipe(cleanCss())
    .pipe(gulp.dest('./public/css/admin'));
});
//css压缩3
gulp.task('cssFront',  () => {
  return gulp.src('public/staticEdit/front/css/*.css')
    .pipe(cleanCss())
    .pipe(gulp.dest('public/static/front/css'));
});


//开发构建
  gulp.task('default', function (done) {   
  condition = false;   
  runSequence( 
  ['html'],  
  ['es6'],
  ['es6Admin'],
  ['jsFront'],        
  ['jsAdmin'],    
  ['revCss'],
  ['revJs'],
  ['revHtml'], 
  ['sass'], 
  ['cssAdmin'],
  ['cssFront'],     
  done);});
    gulp.task('default', function (done) {   
    condition = false;   
    runSequence( 
      ['sass'],      
      done
    );
  });

  //gulp.task('default', gulp.series('sass','css','sassAdmin','cssAdmin'));
  
  gulp.task('watch',function(){
    gulp.watch('./public/UI-admin/sass/*.scss',gulp.series('default'));
    gulp.watch('./public/sass/*.scss',gulp.series('default'));
})

//   gulp.task("sass", gulp.series(() => {
//         // default task code here
//          return gulp.src('./public/UI-admin/sass/*.scss')
//     .pipe(sass())
//     .pipe(gulp.dest('./public/css/admin'));
// }));
 
// gulp.task("default",gulp.series("webpack","sass"));