var gulp = require('gulp');

var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var base64 = require('gulp-base64');
var cssmin = require('gulp-minify-css');
var rename = require('gulp-rename');
var browserSync = require('browser-sync').create();

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

//通过gulp处理css的自动前缀
gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(autoprefixer()) //自动前缀
        .pipe(gulp.dest('dist/css')) //目的路径
});

//通过gulp将css中的图片转换成base65编码
gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(base64()) //base64编码
        .pipe(gulp.dest('dist/css')) //目的路径
});

//通过gulp将css进行压缩
gulp.task('styles', function() {
    return gulp.src('src/css/*.css') //源文件路径
        .pipe(cssmin()) //css压缩
        .pipe(gulp.dest('dist/css')) //目的路径
});

//通过gulp将js文件进行压缩
gulp.task('scripts', function() {
    return gulp.src('src/js/*.js')  //源文件路径
         .pipe(uglify())   //压缩js
         .pipe(gulp.dest('dist/js')) //目的路径
})

//通过gulp将图片进行压缩
gulp.task('images', function() {
    return gulp.src('src/img/*')
        .pipe(cache(imagemin({
            optimizationLevel: 3,
            progressive: true,
            interlaced: true
        })))
        .pipe(gulp.dest('dist/img'))
});

//使用 BrowserSync 服务实现文件变更的实时编译调试
gulp.task('dev', function() {
    //初始化browser-sync服务
    browserSync.init({
        server: {
            baseDir: "./dist"
        }
    });
    
    //检测less文件是否更改，来调用重新编译css
    gulp.watch('src/less/*', ['styles']);  

    //如果css文件更改过则刷新服务器
    gulp.watch( ['./dist/sys/css/*'] ).on("change", browserSync.reload)
});