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