1、首先npm init建立package.json檔案

2、專案中安裝gulp ， npm install gulp --save-dev

3、安裝以下所有外掛，例如：cnpm install gulp-rename --save-dev

"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-es2015": "^6.24.1",
    "browserify": "^16.2.3",
    "glob-parent": "^3.1.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^7.0.1",
    "gulp-connect": "^5.6.1",
    "gulp-less": "^4.0.1",
    "gulp-load-plugins": "^1.5.0",
    "gulp-minify-css": "^1.2.4",
    "gulp-rename": "^1.4.0",
    "gulp-uglify": "^3.0.1",
    "indx": "^0.2.3",
    "is-posix-bracket": "^0.1.1"
  }
 

4、新建gulpfile.js檔案，配置如下：assets/javascript路徑可自行修改

var gulp  = require ('gulp'),
		$ = require("gulp-load-plugins")();

/*活動模板*/
gulp.task('convertJS', function(){
  gulp.src(['assets/javascript/!(*.min).js'])
    .pipe($.babel({
      presets: ['es2015']
    }))
    .pipe($.uglify())
    .pipe($.rename({suffix: '.min'}))   //rename壓縮後的檔名
    .pipe(gulp.dest('assets/javascript/'))
});

// 解析css
gulp.task("css",function () {
  gulp.src("assets/stylesheets/*.less")
  .pipe($.less())
 // .pipe(gulp.dest('./template5/assets/stylesheets/'))
  .pipe( $.minifyCss() )
  .pipe($.rename({suffix: '.min'}))   //rename壓縮後的檔名
  .pipe( gulp.dest("assets/stylesheets/"))
})
gulp.task("reload",function () {
  gulp.src([
    "assets/stylesheets/*.less",
    "assets/javascript/*.js",
    "*.html"
    ])
  .pipe($.connect.reload())
})
//開啟伺服器
gulp.task("webserver",function () {
  $.connect.server({
    host: '0.0.0.0',
    port : "7070",
    livereload : true,
    root: "./"
  })
})


// gulp.watch([
//   "assets/stylesheets/*.less",
//   "assets/javascript/*.js",
//   "*.html",
// ],["css", "convertJS", "reload"])
gulp.watch([
  "assets/stylesheets/*.less",
],["css","reload"])//關聯檔案

gulp.watch([
  "assets/javascript/*.js",
  ],['convertJS',"reload"])//關聯檔案

gulp.watch([
"*.html",
],["reload"])//關聯檔案

gulp.task("default",["css","convertJS","webserver"])