json 个人gulp构建过程包括资产版本控制和单独的配置文件

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了json 个人gulp构建过程包括资产版本控制和单独的配置文件相关的知识,希望对你有一定的参考价值。

var gulp       = require('gulp'),
	util       = require('gulp-util'),
	plugins    = require('gulp-load-plugins')(),
	del        = require('del'),
	files      = {},
	config     = {},
	package, config, patterns = [];

module.exports = gulp;

/**************************************************
 * helper
 **************************************************/
	function handleError (error) {
		util.log(error);
	}

	function loadPackageFile() {
		delete require.cache[require.resolve('./package.json')];

		package = require('./package.json');
	}

	function loadConfigFile() {
		delete require.cache[require.resolve('./gulpconfig.json')];

		config = require('./gulpconfig.json');
	}

	function preparePatterns(node, prefix) {
		var key, id, item;

		node = node || package;

		for(key in node) {
			id   = (prefix) ? prefix + '.' + key : 'package.' + key;
			item = node[key];

			if(typeof item === 'string') {
				patterns.push({ pattern: new RegExp('{{gulp:' + id + '}}', 'g'), replacement: item });
			} else if(Object.prototype.toString.call(item) === '[object Object]') {
				preparePatterns(item, id);
			}
		}
	}

	function getDatePatterns() {
		var date  = new Date(),
			month = ''.concat('0', (date.getMonth() + 1).toString()).slice(-2),
			day   = ''.concat('0', date.getDate().toString()).slice(-2),
			time  = ''.concat('0', date.getHours().toString()).slice(-2) + ':' + ''.concat('0', date.getMinutes().toString()).slice(-2) + ':' + ''.concat('0', date.getSeconds().toString()).slice(-2);

		return [
			{ pattern: new RegExp('{{gulp:date.year}}', 'g'), replacement: date.getFullYear() },
			{ pattern: new RegExp('{{gulp:date.month}}', 'g'), replacement: month },
			{ pattern: new RegExp('{{gulp:date.day}}', 'g'), replacement: day },
			{ pattern: new RegExp('{{gulp:date.time}}', 'g'), replacement: time }
		];
	}

/**************************************************
 * initialization
 **************************************************/
	loadPackageFile();
	loadConfigFile();
	preparePatterns();

/**************************************************
 * tasks (private)
 **************************************************/
	gulp.task('bump', [ 'javascript:minimal:build', 'javascript:default:build', 'less:base:build', 'html:all:build' ], function() {
		loadPackageFile();
	});

	gulp.task('javascript:minimal:clean', function(callback) {
		return del(config.tasks.javascript.minimal.clean || [ config.tasks.javascript.minimal.destination.min + '**/*', config.tasks.javascript.minimal.destination.max + '**/*' ], callback);
	});

	gulp.task('javascript:minimal:lint', function() {
		return gulp.src(config.tasks.javascript.minimal.lint || config.tasks.javascript.minimal.watch)
			.pipe(plugins.jshint('./.jshintrc'))
			.pipe(plugins.jshint.reporter('jshint-stylish'));
	});

	gulp.task('javascript:minimal:build', [ 'javascript:minimal:clean', 'javascript:minimal:lint' ], function() {
		return gulp.src(config.tasks.javascript.minimal.build || config.tasks.javascript.minimal.watch)
			.pipe(plugins.plumber({ errorHandler: handleError}))
			// max
			.pipe(plugins.uglify({ compress: false, mangle: false, preserveComments: 'none', output: { beautify: true } }))
			.pipe(plugins.concat('minimal.js'))
			.pipe(plugins.header(config.strings.banner.max.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.javascript.minimal.destination.max))
			// min
			.pipe(plugins.uglify({ preserveComments: 'none' }))
			.pipe(plugins.concat('minimal.js'))
			.pipe(plugins.header(config.strings.banner.min.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.javascript.minimal.destination.min));
	});

	gulp.task('javascript:default:clean', function(callback) {
		return del(config.tasks.javascript.default.clean || [ config.tasks.javascript.default.destination.min + '**/*', config.tasks.javascript.default.destination.max + '**/*' ], callback);
	});

	gulp.task('javascript:default:lint', function() {
		return gulp.src(config.tasks.javascript.default.lint || config.tasks.javascript.default.watch)
			.pipe(plugins.jshint('./.jshintrc'))
			.pipe(plugins.jshint.reporter('jshint-stylish'));
	});

	gulp.task('javascript:default:build', [ 'javascript:default:clean', 'javascript:default:lint' ], function() {
		return gulp.src(config.tasks.javascript.default.build || config.tasks.javascript.default.watch)
			.pipe(plugins.plumber({ errorHandler: handleError}))
			// max
			.pipe(plugins.uglify({ compress: false, mangle: false, preserveComments: 'none', output: { beautify: true } }))
			.pipe(plugins.header(config.strings.banner.max.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.javascript.default.destination.max))
			// min
			.pipe(plugins.uglify({ preserveComments: 'none' }))
			.pipe(plugins.header(config.strings.banner.min.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.javascript.default.destination.min));
	});

	gulp.task('less:base:clean', function(callback) {
		return del(config.tasks.less.base.clean || [ config.tasks.less.base.destination.min + '**/*', config.tasks.less.base.destination.max + '**/*' ], callback);
	});

	gulp.task('less:base:build', [ 'less:base:clean' ], function() {
		return gulp.src(config.tasks.less.base.build || config.tasks.less.base.watch)
			.pipe(plugins.plumber({ errorHandler: handleError}))
			.pipe(plugins.less({ compress: false }))
			.pipe(plugins.autoprefixer(config.settings.autoprefixer))
			// max
			.pipe(plugins.header(config.strings.banner.max.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.less.base.destination.max))
			// min
			.pipe(plugins.minifyCss({ keepSpecialComments: 0 }))
			.pipe(plugins.header(config.strings.banner.min.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.less.base.destination.min));
	});

	gulp.task('less:widget:clean', function(callback) {
		return del(config.tasks.less.widget.clean || [ config.tasks.less.widget.destination.min + '**/*', config.tasks.less.widget.destination.max + '**/*' ], callback);
	});

	gulp.task('less:widget:build', [ 'less:widget:clean' ], function() {
		return gulp.src(config.tasks.less.widget.build || config.tasks.less.widget.watch)
			.pipe(plugins.plumber({ errorHandler: handleError}))
			.pipe(plugins.less({ compress: false }))
			.pipe(plugins.autoprefixer(config.settings.autoprefixer))
			// max
			.pipe(plugins.header(config.strings.banner.max.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.less.widget.destination.max))
			// min
			.pipe(plugins.minifyCss({ keepSpecialComments: 0 }))
			.pipe(plugins.header(config.strings.banner.min.join('\n')))
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.less.widget.destination.min));
	});

	gulp.task('html:all:clean', function(callback) {
		return del(config.tasks.html.all.clean || config.tasks.html.all.destination + '**/*', callback);
	});

	gulp.task('html:all:build', [ 'html:all:clean' ], function() {
		return gulp.src(config.tasks.html.all.build || config.tasks.html.all.watch)
			.pipe(plugins.frep(patterns))
			.pipe(plugins.frep(getDatePatterns()))
			.pipe(gulp.dest(config.tasks.html.all.destination));
	});

/**************************************************
 * tasks (public)
 **************************************************/
	gulp.task('bump:patch', function() {
		return gulp.src(config.tasks.bump.watch)
			.pipe(plugins.bump({ type: 'patch' }))
			.pipe(gulp.dest(config.tasks.bump.destination));
	});

	gulp.task('bump:minor', function() {
		return gulp.src(config.tasks.bump.watch)
			.pipe(plugins.bump({ type: 'minor' }))
			.pipe(gulp.dest(config.tasks.bump.destination));
	});

	gulp.task('bump:major', function() {
		return gulp.src(config.tasks.bump.watch)
			.pipe(plugins.bump({ type: 'major' }))
			.pipe(gulp.dest(config.tasks.bump.destination));
	});

	gulp.task('all', [ 'bump' ]);

	gulp.task('watch', function() {
		plugins.livereload.listen();

		gulp
			.watch(config.tasks.bump.watch, [ 'bump' ])
			.on('change', plugins.livereload.changed);

		gulp
			.watch(config.tasks.javascript.minimal.watch, [ 'javascript:minimal:build' ])
			.on('change', plugins.livereload.changed);

		gulp
			.watch(config.tasks.javascript.default.watch, [ 'javascript:default:build' ])
			.on('change', plugins.livereload.changed);

		gulp
			.watch(config.tasks.less.base.watch, [ 'less:base:build' ])
			.on('change', plugins.livereload.changed);

		gulp
			.watch(config.tasks.less.widget.watch, [ 'less:widget:build' ])
			.on('change', plugins.livereload.changed);

		gulp
			.watch(config.tasks.html.all.watch, [ 'html:all:build' ])
			.on('change', plugins.livereload.changed);
	});

	gulp.task('default', [ 'watch' ]);
{
  "tasks": {
    "bump": {
      "watch": "./package.json",
      "destination": "./"
    },
    "javascript": {
      "default": {
        "watch": [
          "./portfolio/assets/javascript/src/**/*.js",
          "!./portfolio/assets/javascript/src/minimal.js"
        ],
        "clean": [
          "./portfolio/assets/javascript/min/**/*.js",
          "!./portfolio/assets/javascript/min/minimal.js",
          "./portfolio/assets/javascript/max/**/*.js",
          "!./portfolio/assets/javascript/max/minimal.js"
        ],
        "destination": {
          "min": "./portfolio/assets/javascript/min/",
          "max": "./portfolio/assets/javascript/max/"
        }
      },
      "minimal": {
        "watch": [
          "./portfolio/assets/vendor/qoopido.js/src/base.js",
          "./portfolio/assets/vendor/qoopido.js/src/emitter.js",
          "./portfolio/assets/vendor/qoopido.js/src/polyfill/window/matchmedia.js",
          "./portfolio/assets/vendor/qoopido.js/src/component/sense.js",
          "./portfolio/assets/vendor/qoopido.js/src/component/remux.js",
          "./portfolio/assets/javascript/src/minimal.js"
        ],
        "clean": [
          "./portfolio/assets/javascript/min/minimal.js",
          "./portfolio/assets/javascript/max/minimal.js"
        ],
        "destination": {
          "min": "./portfolio/assets/javascript/min/",
          "max": "./portfolio/assets/javascript/max/"
        }
      }
    },
    "less": {
      "base": {
        "watch": "./portfolio/assets/css/src/**/*.less",
        "build": [
          "./portfolio/assets/css/src/minimal.less",
          "./portfolio/assets/css/src/delta.less",
          "./portfolio/assets/css/src/complete.less"
        ],
        "destination": {
          "min": "./portfolio/assets/css/min/",
          "max": "./portfolio/assets/css/max/"
        },
        "clean": [
          "./portfolio/assets/css/min/",
          "./portfolio/assets/css/max/",
          "!./portfolio/assets/css/min/widget/",
          "!./portfolio/assets/css/max/widget/"
        ]
      },
      "widget": {
        "watch": "./portfolio/assets/css/src/widget/**/*.less",
        "destination": {
          "min": "./portfolio/assets/css/min/widget/",
          "max": "./portfolio/assets/css/max/widget/"
        }
      }
    },
    "html": {
      "all": {
        "watch": [ "./portfolio/.templates/view/dwoo/src/**/*.tpl" ],
        "clean": [ "./portfolio/.templates/view/dwoo/dist/**/*.tpl" ],
        "destination": "./portfolio/.templates/view/dwoo/dist/"
      }
    }
  },
  "settings": {
    "autoprefixer": {
      "browsers": [
        "ie > 8",
        "> 2%"
      ],
      "cascade": true
    }
  },
  "strings": {
    "banner": {
      "min": [
        "/*! {{gulp:package.title}} {{gulp:package.version}}, {{gulp:date.year}}-{{gulp:date.month}}-{{gulp:date.day}} | {{gulp:package.homepage}} | (c) {{gulp:date.year}} {{gulp:package.author.name}} */",
        ""
      ],
      "max": [
        "/*!",
        "* {{gulp:package.title}}",
        "*",
        "* version: {{gulp:package.version}}",
        "* date:    {{gulp:date.year}}-{{gulp:date.month}}-{{gulp:date.day}}",
        "* author:  {{gulp:package.author.name}} <{{gulp:package.author.email}}>",
        "* website: {{gulp:package.homepage}}",
        "*",
        "* Copyright (c) {{gulp:date.year}} {{gulp:package.author.name}}",
        "*/",
        ""
      ]
    }
  }
}

以上是关于json 个人gulp构建过程包括资产版本控制和单独的配置文件的主要内容,如果未能解决你的问题,请参考以下文章

用gulp+webpack构建多页应用——记一次Node多页应用的构建过程

使用 Gulp.js 将版本化和构建(缩小)文件正确提交到 GitHub

前端构建工具gulp

前端构建工具gulp

gulp

前端Node项目发布流程