Gulp plug-in (gulp-jmbuild) for front-end WEB build, gulpgulp-jmbuild
Source Code address: https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuildgulp-jmbuild
Gulp plug-in for WEB Front-end construction
Install
Go to the directory you used as the build tool
1. First install gulp
$ npm install -g gulp$ npm install --save-dev gulp
2. install other Dependencies [q/gulp-jshint].
$ npm install q$ npm install gulp-jshint
3. Install gulp-jmbuild
$ npm install gulp-jmbuild
Example
Create under build directorygbulpfile.js
Var jshint = require ('Gulp-jshint'); var Q = require ('q'); var gulp = require ('gulp '); var path = require ('path'); var jmbuild = require ('Gulp-jmbuild'); // configuration file var config = {"debug": false, // if it is true, the file will not be fully merged and compressed, and the md5 code will not be entered. The Listener // project root path is supported, and the subsequent paths are basically relative to it. "Root": path. resolve ('.. /'), // build the target directory, relative to root "dest": "dist", // build the target directory of the js file, relative to dest ,,, if you want to place it in a different place, you can use .. /This method to change the root path. "JsDest": "static/js", // construct the target directory for the html file, which is opposite to the dest "htmlDest": "", // construct the target directory for the css file, compared with dest "cssDest": "static/css", the basic path segment of the // JS file is mainly used for modular extraction of module id usage. The proportion is in static/js/test/. when js is built, test/a after static/js will be taken as the module id "jsBase": "static/js", // delimiter of the file suffix, for example:. {md5 }. js "separator ":". ", // how many bits are obtained for the md5 code," md5Size ": 8, // the configuration to be constructed by JS" js ": [{// build the source, consistent with the source method of gulp, which can be a single file/directory *. js/array // all of the following classes are the same as "source": "static/js /*. js ", // whether or not to add the md5 suffix, default fa Lse 'md5': true, // name extension, which is directly added before the filename suffix, for example, a.324242.lc. js "expand": 'lc '}, {"source": ["static/js/test /**/*. js "], // used to merge all files in source to the same file, and name this configuration value" concat ":" t. js ", 'md5': true, // current configuration release location. If this parameter is not set, it is placed under jsDest by default. "Dest": 'test'}], "css": [{"source": "static/css /*. css "," md5 ": true}]," html ": [{" source ":" index.html ", // when an inline modular js file exists, whether to embed the dependent modules together. The default value is false "includeModule": true}], // create a common file, which can be used for copying images and typing md5 codes "files ": [{"source": "static/img /*. * "," md5 ": true," dest ":" static/img "}]}; // syntax check gulp. task ('jshint', function () {var sources = []; if (config. js & config. js. length) {for (var I = 0; I <config. js. length; I ++) {if (typeof config. js [I] = 'string') {sources. push (config. js [I]);} else {if (Array. isArray (config. js [I]. source) {sources = sources. concat (config. js [I]. source);} else {sources. push (config. js [I]. source) ;}}} console. log ('jshint: '); return gulp. src (sources, {cwd: config. root }). pipe (jshint ()). pipe (jshint. reporter ('default');}); // generate the compressed JS task var jstasks = jmbuild. jsTask (gulp, config, ['jshint']); // create a task to execute the previously created task gulp. task ('minifyjs', jstasks, function () {console. log ('minifyjs-start'); var deferred = Q. defer (); deferred. resolve (); return deferred. promise;}); // var filetasks = jmbuild. fileTask (gulp, config, []); gulp. task ('cpfile', filetasks, function () {console. log ('cpfile-start'); var deferred = Q. defer (); deferred. resolve (); return deferred. promise;}); // compress cssvar csstasks = jmbuild.css Task (gulp, config, ['cpfile']); gulp. task ('ifycss ', csstasks, function () {console. log ('minifycss-start'); var deferred = Q. defer (); deferred. resolve (); return deferred. promise;}); // generate the html parsing Director var htmlTasks = jmbuild.html Task (gulp, config, ['minifyjs', 'minifycss ']); gulp. task ('parsehtml ', htmlTasks, function () {var deferred = Q. defer (); deferred. resolve (); return deferred. promise;}); gulp. task ('default', ['jshint', 'minifyjs', 'cpfile', 'minifycss ', 'parsehtml']);View Code
Run
Run the following command in the gulpfile. js directory:
$ gulp
Usage
Description of path processing during html Construction: If it starts with "." or "/", it is opposite to the dest directory for building and configuration;
If not, when it is. js, it uses jsdestas as the example, and .css calculates the absolute path using the path configured by cssDest. If none of the preceding conditions are met, the current html file directory is used as the current path.
1. _ pkg/_ uri Function
When _ pkg ('xxx')/_ uri ('xxx') is used in html, it is automatically replaced with the corresponding file path during construction, if md5 is configured, the md5 code is automatically carried (configured in the config configuration ). For example:
<link rel="stylesheet" href="__uri('static/css/style.css')" /> <script src="__uri(static/js/a.js)"></script>var a=__pkg('/static/js/a.js');var t=__pkg('test/t.js');
After construction:
<link rel="stylesheet" href="static/css/style.95cc4059.css" /> <script src="static/js/a.49ea7d65.js"></script>var a="/static/js/a.49ea7d65.js";var t="test/t.fbdd9f3d.js";
2. _ inline Function
This function is used to inline the corresponding file content (after construction) into the current html.
!! # Ff0000 Note: If "includeModule": true "is specified in the current html build configuration, when an inline modular js file is used, all its dependencies on js will be inline .!!
For example:
<style> __inline('/static/css/style.css')</style><script>__inline('test/t.js', 'a.js');</script>
After construction:
<Style> body, html {margin: 0; padding: 0 }... </style> <script> define ("a", [], function (n, a, I) {. run = function () {alert ("I am a")}); define ("B ",[". /a "], function (n, I, a) {var f = n (". /a "); I. init = function () {f. run ("B")}); define ("test/c ",[".. /B "], function (I, n, t) {var B = I (".. /B "); n. init = function () {B. init ("B")}); define ("test/dir/d ",[".. /.. /B "], function (I, n, t) {var d = I (".. /.. /B "); n. init = function () {d. init ("d") }}); </script>
3.import syntax in CSS
When building a css file, @ import url ("./base.css? _ Inline "); the specified file is merged into the current css.
