H5gulp版非前后的分离环境

由于公司不同意我们使用前后端分离进行开发，硬是要我们和PHP混合在一起，所以用gulp搭建了一个简单的手脚架来用

目录结构：

主要是gulpfile.js里的内容

var gulp  = require('gulp'),
    px2rem = require('gulp-px3rem'),//移动浏览器适配
    sass = require('gulp-sass'),//sass转换
    cssmin = require('gulp-cssmin'),//css压缩
    uglify = require('gulp-uglify'),//js压缩
    inline = require('gulp-inline'),//文件内联
    rename = require('gulp-rename'),//重命名文件
    browserSync = require('browser-sync').create(),//browser自动刷新
    reload = browserSync.reload,
    replace = require('gulp-batch-replace');//文件内容替换

function swallowError(error) {
    // If you want details of the error in the console
  console.error(error.toString())

  this.emit('end')
}
//出来sass文件转换rem适配浏览器
gulp.task('sass', function() {
    return gulp.src(['./src/common/css/*.scss','./src/css/*.scss'])//多文件合并成一个
        .pipe(sass({outputStyle: 'compact',sourceComments:false})).on('error', swallowError)
        .pipe(px2rem({
            baseDpr: 2,             // base device pixel ratio (default: 2)
            threeVersion: false,    // whether to generate 3x version (default: true)
            remVersion: true,       // whether to generate rem version (default: true)
            remUnit: 75,            // rem unit value (default: 64)
            remPrecision: 6  
        })).on('error', swallowError)
        .pipe(gulp.dest('./build/css/'))
})
//js压缩
gulp.task('uglify', function() {
  return gulp.src('./src/js/**/*.js')
        .pipe(uglify({
            comporess : false,
            preserveComments : 'license'
        })).on('error', swallowError)
        .pipe(gulp.dest('./build/js'))
})

//把需要的 script link 内容打包到页面里面（内联）
gulp.task('inline', function() {
    gulp.src(['./pages/**/*.html'])
        .pipe(inline({
            js: uglify,
            css: cssmin,
            disabledTypes: ['svg', 'img'] // Only inline css files 
          }))
        .pipe(gulp.dest('./dest'));
});

gulp.task('watches' ,['sass'], function() {
   // 从这个项目的根目录启动服务器
    browserSync.init({
        server: {
            baseDir: "./",
        },
        port: 4444,
        open: "local",
        online: false
    });
　//监控文件变化自动刷新
  gulp.watch('./src/js/**/*.js', ['uglify']).on("change", browserSync.reload);
  gulp.watch('./src/css/*.scss', ['sass']).on("change", browserSync.reload);
  gulp.watch('./pages/**/*.html').on("change", browserSync.reload);
})

gulp.task('default', ['sass','uglify'])


//复制打包后的css到对应目录
gulp.task('cloneCss',['sass'],function(){
    gulp.src(['./build/css/*.css'])
        .pipe(rename(function(path){
            path.basename = path.basename.replace('.debug','');
        }))
        .pipe( gulp.dest('dist/css/'))
})
//复制js到指定目录
gulp.task('cloneJs',function(){
    gulp.src(['./src/js/**/*.js'])
        .pipe( gulp.dest('dist/js/'))
})
//复制公用文件到指定目录
gulp.task('cloneCommonJs',function(){
    gulp.src(['./src/common/js/*.js'])
        .pipe( gulp.dest('dist/js/common/'))
})
//复制图片到对应目录
gulp.task('cloneImages',function(){
    gulp.src(['./src/images/*'])
        .pipe( gulp.dest('dist/images/'))
})
复制html文件到对应目录
gulp.task('cloneHtml',function(){
    gulp.src(['./pages/**/*.html'])
        .pipe( gulp.dest('dist/'))
})
//修改文件内的路径配置
var replaceThis = [
    ['../../build/css/', '../../css/'],
    ['../../src/js/', '../../js/'],
    ['../../src/common/js/', '../../js/'],
    ['../../src/images/','../../images/'],
    ['debug.css','css']
];
//执行修改文件内路径
gulp.task('replace', function() {
  gulp.src('./dist/**/*.html')
    .pipe(replace(replaceThis))
    .pipe(gulp.dest('./dist'));
});
//打包文件给后端
gulp.task('build',['cloneCss','cloneCommonJs','cloneJs','cloneImages'], function () {
    gulp.src(['./pages/**/*.html'])
        .pipe(replace(replaceThis))
        .pipe(gulp.dest('./dist/pages'));
});