基于gulp的工作流配置|博客系列

{
  "name": "gulp-project",
  "scripts": {
    "dev": "gulp dev", //npm run dev   开发
    "build": "gulp build", //npm run build   发布
    "upload": "gulp upload", //npm run upload 上传服务器 
    "zip": "gulp zip" ////npm run zip 打包文件
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.22.0", //编译es6
    "browser-sync": "^2.15.0",  //监听改动刷新
    "gulp": "^3.9.1", //gulp
    "gulp-autoprefixer": "^3.1.1", //补齐css浏览器前缀
    "gulp-babel": "^6.1.2", // Es6
    "gulp-clean": "^0.3.2", //删除文件
    "gulp-clean-css": "^2.0.12", //css压缩，gulp-minify-css不更新了
    "gulp-concat": "^2.6.0",//合并文件
    "gulp-ftp": "^1.1.0",//提交到ftp服务器
    "gulp-git": "^1.11.3",//提交到git
    "gulp-htmlmin": "^2.0.0",//压缩html
    "gulp-imagemin": "^3.0.3",//压缩图片
    "gulp-rename": "^1.2.2",//重命名文件
    "gulp-rev-append": "^0.1.6", //添加MD5版本号，这里改成了时间戳
    "gulp-sass": "^2.3.2",//编译SASS
    "gulp-uglify": "^2.0.0",//js压缩
    "gulp-util": "^3.0.7", //说是ftp配套用的，看了下是包装了些常用函数
    "gulp-zip": "^3.2.0" // 打包文件
  }
}

//组件

let gulp = require('gulp'),
	browserSync = require('browser-sync').create(), //监听刷新
    reload = browserSync.reload,
    ftp = require('gulp-ftp'), // ftp上传
    gutil = require('gulp-util'),
    sass = require('gulp-sass'), // sass
    cleancss = require('gulp-clean-css'), // CSS压缩
    autoprefixer = require("gulp-autoprefixer"),
    uglify = require('gulp-uglify'), // js压缩
    concat = require('gulp-concat'), // 合并文件
    rename = require('gulp-rename'), // 重命名
    clean = require('gulp-clean'), //清空文件夹
    imagemin = require('gulp-imagemin'), //压缩图片
    zip = require('gulp-zip'), //打包文件
    rev = require('gulp-rev-append'), //添加MD5
    htmlmin = require('gulp-htmlmin'), // 压缩html
	git = require('gulp-git'),     //git
	babel = require("gulp-babel"); //ES6 转es5

// =========== 开发构建流程 [多文件输出] ==============

//dev
gulp.task('sass:dev', () => {
    gulp.src('src/sass/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('src/css/'))
        .pipe(reload({ stream: true }))
});

// 合并、重命名css
gulp.task('css:dev', ['sass:dev'], () => {
    gulp.src(['src/css/*.css', '!src/css/areaMap.css'])
        .pipe(concat('all.css'))
        .pipe(gulp.dest('dist/css/'))
});

// 合并、重命名js
gulp.task('js:dev', () => {
    gulp.src('src/js/*.js')
    	.pipe(babel({
		      	 	presets: ['es2015']
     			})) //ES6转ES5
        //.pipe(concat('all.js')) 开发阶段分开输出js文件
        .pipe(gulp.dest('dist/js/'))
        .pipe(reload({ stream: true }))
});

// HTML

gulp.task('html:dev', () => {
    gulp.src('src/tpl/*.html')
        .pipe(gulp.dest('dist'))
});

// 将lib的库文件对应到指定位置
gulp.task('lib:dev', () => {
    gulp.src('./src/lib/*')
        .pipe(gulp.dest('./dist/lib/'));
});


//开发构建
gulp.task('dev', ['css:dev', 'js:dev', 'html:dev', 'img','copyFonts','lib'], () => {
    browserSync.init({
        server: {
            baseDir: "dist" // 设置服务器的根目录为dist目录
        },
        notify: false // 开启静默模式
    });
    // 我们使用gulp的文件监听功能，来实时编译修改过后的文件

    gulp.watch('src/js/*.js', ['js:dev']);
    gulp.watch('src/sass/*.scss', ['sass:dev']);
    gulp.watch('src/tpl/*.html', ['html:dev']);
    gulp.watch('src/fonts/**', ['copyFonts']);
    gulp.watch('src/images/**', ['img']);
    gulp.watch('src/lib/**', ['lib']);
});