var gulp = require('gulp');
//刪除
var del = require('del');
// 常用外掛
// 壓縮javascript檔案，減小檔案大小
var uglify = require('gulp-uglify');
// 檔案重新命名
var rename = require('gulp-rename');   
// 壓縮css
var cssmin = require('gulp-cssmin');
// 合併javascript檔案，減少網路請求
var concat = require('gulp-concat');
//解析sass檔案
var sass = require("gulp-sass");
// 壓縮圖片
var imagemin = require("gulp-imagemin");
// 壓縮html
var htmlmin = require('gulp-htmlmin');
// babel es6轉化為es5
var babel = require("gulp-babel");    // 用於ES6轉化ES5
//連線伺服器
var connect = require('gulp-connect');

// 這裡的路徑都是相對路徑，我這個檔案的話，相對gulp_test
// gulp.task('名字',函式) 執行任務
// gulp.dest('輸出路徑')  輸出檔案
// gulp.src('獲取路徑')   獲取路徑
// gulp.watch('需要監聽的檔案',改變後執行的函式或者task(陣列的形式)任務)

// 使用gulp首先要安裝node.js(因為gulp是在node.js下執行的,一般裝在C盤)
// 安裝後，cmd上執行node -v 出現版本號則成功
// 然後再你需要的地方新建一個資料夾(建議路徑和資料夾名純英文，避免意外)
// shift右鍵新建的資料夾，出現cmd執行面板並且是當前資料夾的路徑
// 然後安裝npm install gulp -g (這句話npm是國外的，如果網速不好可以用國內的cnpm（淘寶的）,
// install是安裝，gulp是需要上使用的外掛，-g是全域性安裝)
// 一樣是npm -v檢視版本，有則成功
// 成功後執行npm init會有很多個你需要回答的資訊，可以一直按回車不填
// {   "name": "test",  "version": "1.0.0",  "description": "我是描述",
//   "main": "index.js",  "scripts": {    "test": "echo \"Error: no test specified\"
//    && exit 1"  },  "author": "",  "license": "ISC"}
// 然後會在你新建的資料夾產生一個package.json 裡面有個人資訊等等，在這裡主要說倆個
// "devDependencies"這個是開發者模式，然後這個裡面左邊都是一些外掛名字
// 然後這裡講下外掛的安裝，npm install 這樣預設安裝devDependencies和dependencies的外掛
// 例如npm install del sass babel  這樣空格可以安裝多個外掛
// "dependencies"這個是上線模式，和開發者模式一樣

// 進入相應的資料夾的cmd控制檯進行輸入加字首 gulp

gulp.task('default',function(){
    console.log('執行任務')
})
gulp.task('getsrc',function(){
    gulp.src('路徑')
})
gulp.task('output',function(){
    gulp.dest('輸出路徑')
})
gulp.watch('監聽路徑',function(){
    console.log('當路徑的內容發生改變的時候，執行這裡')
})
// 刪除
gulp.task('del',function(){
	del(['dist'])
})


// 執行任務es6轉換es5
gulp.task('copy',function(){
    gulp.src('js/*.js')
    .pipe(babel({
        presets: ['es2015']
    }))
    .pipe(gulp.dest('dist'))
})


gulp.task('concat',function(){
     gulp.src('dist/*.css')
    .pipe(concat('main.css'))
    .pipe(gulp.dest('build'))
})

// sass轉為css,然後合併css檔案再輸出
gulp.task('sass', function () {
    return gulp.src('sass/*.scss')
      .pipe(sass().on('error', sass.logError))
      .pipe(concat('main.css'))
      .pipe(gulp.dest('build'))
  });

// 先執行監聽，然後啟動伺服器，如果監聽的檔案發生改變，執行reload
gulp.task('myServer',['watcher'],function(){
       connect.server({
               name:'myServer', // 可忽略，不配置
               root:'blog',    //根目錄，預設：gulpfile.js所在根目錄
               port:3639,    //埠，預設：8080
               //host:'你的域名（寫出了又要被百度刪了，心很累！）',  //可忽略，預設值：localhost
               livereload:true // 是否自動過載，自然是true了，如果不想自動過載，就false。
       });
});
//新增gulp.watch()實時監聽
gulp.task('watcher',function(){
    gulp.watch('blog/**/*.*',['loadfiles']); // 需要手動執行：gulp  watcher 才會開始監視。
});
//給需要過載的檔案加上connect.reload()控制
gulp.task('loadfiles',function(){
    	gulp.src('**/*')
    	.pipe(connect.reload());
});