gulp前端项目构架自动化配置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/susuzhe123/article/details/79807406

gulp管理多个项目

default.js:

//默认执行编译
const gulp   = require('gulp');

const options  = require('../config').options;

//开启项目编译
if(options != 'noOrder'){
	gulp.task('default', ['fileinclude','less','connect','cssmin','watch','minifyjs','script']);
}else{
	gulp.task('default', []);
	
}

less.js:

/**
 * [gulp description]  配置task
 * @type {[type]}
 */
let gulp     = require('gulp');
let less     = require('gulp-less');
let config   = require('../config').srcControl;
let connect  = require('gulp-connect');
let cssmin   = require('gulp-clean-css');
let uglify   = require('gulp-uglify');
let rename   = require('gulp-rename');
let notify   = require('gulp-notify');   //提示
let concat   = require('gulp-concat');   //合并文件
let imageMin = require('gulp-imagemin');
let postcss  = require('gulp-postcss');
let base64   = require('gulp-base64');
let changed  = require('gulp-changed');
let fileinclude  = require('gulp-file-include');
let htmlbase64   = require('gulp-img64');
let autoprefixer = require('gulp-autoprefixer');
const debug      = require('gulp-debug');
let lessChanged  = require('gulp-less-changed');
let jshint       = require('gulp-jshint');
var packageJSON  = require('../../package.json');
var jshintConfig = packageJSON.jshintConfig;
 
jshintConfig.lookup = false;

//编译less
gulp.task('less', () => 
  gulp.src(
    config.SET_CSS
  )                                 //less源文件
  .pipe(
    less()           //执行编译
  )      
  .pipe(debug({title: '编译的less文件:'}))
  .pipe(
    gulp.dest(config.MIN_CSS)      //输出目录
  ) 
);

//本地服务
gulp.task('connect',() => {
  connect.server({
    root:'./',  
    port:8080,
  })
})

//压缩css
gulp.task('cssmin', () => 
  gulp.src(config.MIN_CSS+'/common.css')      //压缩的文件
      .pipe( 
        autoprefixer({
          browsers: ['last 2 versions', 'last 5 Explorer versions'],
          cascade: false, //是否美化属性值，也就是冒号对齐， 默认：true 
        })
      )
      // .pipe(
      //   base64({
      //     baseDir : config.DIST_SRC+'/img/',
      //     extensions: ['svg', 'png', /\.jpg#datauri$/i],
      //     maxImageSize: 5*1024, // bytes 
      //     debug: false
      //   })
      // )
    	.pipe(
        cssmin({
            advanced: false,     //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
            compatibility: 'ie7',//保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
            keepBreaks: true,    //类型：Boolean 默认：false [是否保留换行]
            keepSpecialComments: '*'
            //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
        })
      )
      .pipe(
        rename('common.min.css')  //重命名
      )   
      .pipe(changed(config.DIST_SRC))
      .pipe(debug({title: '压缩处理的css文件:'}))
      .pipe(
        gulp.dest(config.DIST_SRC+'/css')            //输出文件夹
      )
      .pipe(
        notify({message:"css task ok"})           //提示
      )
);

//JS处理(合并js资源文件)
gulp.task('minifyjs',() =>
   gulp.src(['./libs/jquery-1.11.0.js'])  //选择合并的JS
       .pipe(concat('vender.js'))             //合并js
       .pipe(gulp.dest('./dist/js/'))
       .pipe(rename({suffix:'.min'}))         //重命名
       .pipe(uglify())                        //压缩
       .pipe(gulp.dest('./dist/js/'))         //输出 
       .pipe(notify({message:"js task ok"})) //提示
);

//压缩js
gulp.task('script', () =>
  gulp.src(config.JS_SRC + '/*.js')
      .pipe(jshint(jshintConfig))
      .pipe(jshint.reporter('default'))
      .pipe(
        uglify()
      )
      .pipe(
        rename({suffix:'.min'})
      )
      .pipe(changed(config.DIST_SRC+'/js/'))
      .pipe(debug({title: '压缩的js文件:'}))
      .pipe(
        gulp.dest(config.DIST_SRC+'/js/')
      )
      .pipe(
        notify({message:"js task ok"})     //提示
      )
)

//压缩图片(已丢弃，不更新)
gulp.task('image',() =>
  gulp.src('./img/*.*')
      .pipe(imageMin({progressive: true}))
      .pipe(gulp.dest('./dist/img'))
)

//引入文件
gulp.task('fileinclude', () => {
  gulp.src([config.HTMl_SRC+'/*.html'])
      .pipe(changed(config.DIST_SRC+'/html/'))
      // .pipe(htmlbase64())  页面的img转base64
      .pipe(fileinclude({  
        prefix: '@@',  
        basepath: '@file'  
      }))
      .pipe(debug({title: '编译的html文件:'}))
      .pipe(gulp.dest(config.DIST_SRC+'/html/'));  
});

watch.js:

/**
 * [gulp description]   监听文件
 * @type {[type]}
 */
const gulp       = require('gulp');
const watch      = require('gulp-watch');
const config     = require('../config').srcControl;
const livereload = require('gulp-livereload');

gulp.task('watch', () => {

    watch(config.LESS_SRC, () => {       //监听所有less
        gulp.start('less');             //出现修改、立马执行less任务
    })

    livereload.listen();

    // Watch any files in html/, reload on change
    watch(config.HTMl_SRC+'/**', () => {
        gulp.start('fileinclude')
    });

    watch([config.DIST_SRC+'/html/**']).on(
        'change', 
        livereload.changed
    );

    watch(config.MIN_CSS+'/common.css', () => {  //监听css
        gulp.start('cssmin');
    })

    watch([config.DIST_SRC+'/css/common.min.css']).on(
        'change', 
        livereload.changed
    );

    watch(config.JS_SRC+'/**.js', () => {  //监听js
        gulp.start('script');
    })

    watch([config.DIST_SRC+'/js/**.js']).on(
        'change', 
        livereload.changed
    );
    
})

config.js:

/**
 * 打包说明
 * 
 * 开发环境：css/*.less
 *           js/*.js
 *           libs/*.js（静态资源）
 *           
 * 生产环境：dist/**
 */
let minimist = require('minimist');
let colors = require('colors');
const figlet = require('figlet')

let knownOptions = {
  string: 'env',
  default: { env: process.env.NODE_ENV || 'noOrder' }
};

let options = minimist(process.argv.slice(2), knownOptions).env;

var a = [
		 "┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬───┐".cyan,
		 "│~ │!1│@2│#3│$4│%5│^6│&7│*8│(9│)0│_-│+=│ BacSp│".cyan,
		 "├─┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬──┤".cyan,
		 "│Tab │Q │W │E │".cyan+'R'.green+" │".cyan+'T'.green+" │Y │U │I │O │P │{[│}]│ |  │".cyan,
		 "├──┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴──┤".cyan,
		 "│ Caps │".cyan+'A'.green+" │".cyan+'S'.green+" │D │F │G │H │J │K │L │:;│ '│".cyan+'Enter'.green+" │".cyan,
		 "├───┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴───┤".cyan,
		 "│ Shift  │Z │X │C │V │B │N │M │<,│>.│?/│ Shift  │".cyan,
		 "├──┬─┴┬┴─┴─┴─┴─┴─┴─┼─┴┬┴─┴┬───┤".cyan,
		 "│Ctrl│win │Alt │       Space      │ Alt│  │  │ Ctrl │".cyan,
		 "└──┴──┴──┴─────────┴──┴───┴───┘".cyan],
	b = [
			"",
		            "           ▍ ★∴",
			　"　s ．t ．▍▍a．..r．█▍ ☆ ★∵t ..../ ",
			"　　◥█▅▅██▅▅██▅▅▅▅▅███◤ ",
			" 　 ．◥███████████████◤",
			"～～～～◥█████████████◤～～～～",
			"～～～～～～～～～～～～～～～～～～～～～～～～"
		];
figlet('', (err, data) => {
	 console.log(a.join('\n'))
});
console.log(b.join('\n').cyan)

 //开发介绍
if(options == 'noOrder'){

	console.log('------------------------------------------------------------------'.green)

	console.log('提示：'.cyan)

	console.log('此项目下增加后台管理---管理员专用'.cyan)

	console.log('------------------------------------------------------------------'.green)

	console.log('请使用 '.cyan+ ' npm run AntUser '.green   +' 命令 开启用户后台系统开发'.cyan)

	console.log('------------------------------------------------------------------'.green)

	console.log('请使用 '.cyan+ ' npm run manageAnt '.green   +' 命令 开启管理员后台系统开发'.cyan)

	console.log('------------------------------------------------------------------'.green)

}

if(options == 'AntUser'){
	console.log('-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-'.green)

	console.log('                 用户后台项目开始运行 '.green)
	console.log('  开发结构说明'.cyan)
	console.log('    css    :   less开发文件'.cyan)
	console.log('    dist   :   编译后的用于生产的文件集合：css、img、js、html'.cyan)
	console.log('    html   :   html开发文件'.cyan)
	console.log('    js     :   js开发文件'.cyan)
	console.log('-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-'.green)
}

if(options == 'manageAnt'){
	console.log('-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-'.green)
	console.log('                 管理员后台项目开始运行'.green)
	console.log('  开发结构说明'.cyan)
	console.log('    mcss   :   less开发文件'.cyan)
	console.log('    mdist  :   编译后的用于生产的文件集合：css、img、js、html'.cyan)
	console.log('    mhtml  :   html开发文件'.cyan)
	console.log('    mjs    :   js开发文件'.cyan)
	console.log('-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-'.green)
}


//定义 css 、js、html、生产路径
let CSS_SRC = '', JS_SRC = '', HTMl_SRC = '', DIST_SRC = '';

if(options == 'AntUser'){
	//配置路径，相对gulpfile.js
	CSS_SRC  = './css';
	JS_SRC   = './js';
	DIST_SRC = './dist';
	HTMl_SRC = './html';
}

if(options == 'manageAnt'){
	//配置路径，相对gulpfile.js
	CSS_SRC  = './mcss';
	JS_SRC   = './mjs';
	DIST_SRC = './mdist';
	HTMl_SRC = './mhtml';
}

module.exports = {
    srcControl: {
    	SET_CSS  : CSS_SRC + "/common.less", //这里只编译common.less，这里是所有的less集合
        MIN_CSS  : CSS_SRC + "",             //这里只压缩common.css，这里是所有的css集合
        LESS_SRC : CSS_SRC + "/*.less",      //需要编译的less
        DIST_SRC : DIST_SRC+ '',　　　　　       //输出目录
        JS_SRC   : JS_SRC  + '',             //js路径
        HTMl_SRC : HTMl_SRC+ '',             //html路径
        settings : {　　　　　　　                //编译less过程需要的配置，可以为空

        }
    },
    options:options
}

gulpfile.js:

var requireDir = require('require-dir');

requireDir('./gulp/task', { recurse: true});

package.json:

{
  "name": "su",
  "version": "2.0.0",
  "description": "增加多个项目管理配置、检测改变文件编译（避免全编译）",
  "main": "index.js",
  "scripts": {
    "gulp": "gulp",
    "AntUser": "gulp --env AntUser",
    "manageAnt": "gulp --env manageAnt"
  },
  "author": "",
  "license": "ISC",
  "jshintConfig":{
    "laxcomma":true,
    "laxbreak":true,
    "multistr":true,
    "expr":true
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-base64": "^0.1.3",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^3.9.3",
    "gulp-concat": "^2.6.1",
    "gulp-debug": "^4.0.0",
    "gulp-file-include": "^2.0.1",
    "gulp-imagemin": "^4.1.0",
    "gulp-img64": "0.0.6",
    "gulp-jshint": "^2.1.0",
    "gulp-less": "^3.4.0",
    "gulp-less-changed": "^1.3.4",
    "gulp-livereload": "^3.8.1",
    "gulp-notify": "^3.2.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-uglify": "^3.0.0",
    "gulp-watch": "^5.0.0",
    "jshint": "^2.9.5",
    "require-dir": "^0.3.2"
  },
  "dependencies": {
    "alphabetjs": "^0.1.4",
    "autoprefixer": "^7.2.5",
    "dir-requirer": "^1.0.4",
    "gulp-connect": "^5.2.0",
    "minimist": "^1.2.0"
  }
}

根据config配置文件来修改控制开发项目的路径配置，根据命令参数来选择哪个项目的开启运行。