gulp 入門配置

使用 browser-sync 進行本地開發自動刷新，配合 gulp-uglify、 gulp-minify-css對js和css進行壓縮處理，最終打包到 dist目錄

安裝gulp 以及其餘插件

npm install gulp
npm install --save-dev ...

代碼示例

• 安裝依賴

npm install --save-dev gulp gulp-clean run-sequence browser-sync gulp-uglify gulp-minify-css

• gulpfile.js

var gulp = require('gulp'), //本地安裝gulp所用到的地方
  clean = require('gulp-clean'),
  runSequence = require('run-sequence'); // 同步執行任務
var browserSync = require('browser-sync');
var uglify = require("gulp-uglify"); //獲取gulp-ublify組件
var minifyCSS = require('gulp-minify-css');

var reload = browserSync.reload;


gulp.task('devServer', function () {
  browserSync({
    notify: false,  // 是否開啓瀏覽器提示
    port: 9000,    // 端口
    server: {
      baseDir: ['src']
    }
  });
 gulp.watch('./src/*.html', reload);  //監聽html目錄下全部文件
});

//清楚dist目錄下全部文件
gulp.task('clean', function () {
  return gulp.src('./dist/', {
    read: false
  })
    .pipe(clean());
});

//定義html任務
gulp.task('move-html', function () {
  gulp.src("./src/*.html") //找到src文件夾下的全部html
    .pipe(gulp.dest("./dist")) //壓縮完成後的文件另存到dist/目錄下
});

gulp.task("move-script", function () {
  gulp.src("./src/js/*.js") //找到js文件夾下的全部js
    .pipe(uglify()) //壓縮文件
    .pipe(gulp.dest("dist/js")) //壓縮完成後的文件另存到dist/js/目錄下
});

gulp.task("move-style", function () {
  gulp.src("./src/css/*.css") //找到css文件夾下的全部css
    .pipe(minifyCSS()) //壓縮文件
    .pipe(gulp.dest("dist/css")) //壓縮完成後的文件另存到dist/css/目錄下
});

//定義看守任務
gulp.task('watch', function () {
  // gulp.watch('public/*.html').on('change', reload);
  gulp.watch('./src/*.html', reload);  //監聽html目錄下全部文件
});


gulp.task('move', ['move-style', 'move-script', 'move-html']);

// release

gulp.task('build', function (cb) {
  runSequence(
    'clean', // 第一步：清理目標目錄
    'move', // 第二步：打包
    cb
  );
});

// dev
gulp.task('default', ['devServer']);

本地開發

gulp default

發佈

gulp build