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'));
});