Before the front-end code deployment is grunt, and then a gulp tool, recently tried a bit, very convenient, feel better than grunt easy to use, the following some common tasks listed, spare.
varGulp = require (' Gulp '));varSdir = ' 0.0.1 ';varDdir = ' 0.0.1.release ';varGutil = require (' Gulp-util '));varClean = require (' Gulp-clean ');varMinifycss = require (' gulp-minify-css '));varConcat = require (' Gulp-concat '));varUglify = require (' gulp-uglify '));varprocesshtml = require (' gulp-processhtml ')); Gulp.task (' Clean ',function(){ returnGULP.SRC (['./' +ddir+ '/* '), {read:false}). Pipe (Clean ());});varFilestomove = [ './' +sdir+ '/data/**/*.* ', './' +sdir+ '/img/*.* '];gulp.task (' Move ', [' Clean '],function(){ returnGULP.SRC (Filestomove, {base: './' +sdir+ '/')}). Pipe (Gulp.dest ('./' +ddir+ '/'));}); Gulp.task (' Concat-minify-css ', [' Clean '],function() { returnGULP.SRC (['./' +sdir+ '/css/style.css ', './' +sdir+ '/css/animate.css ']). Pipe (Concat (' Index.css ') . Pipe (Minifycss ()). Pipe (Gulp.dest ('./' +ddir+ '/css/'));}); Gulp.task (' Concat-uglify-script-index ', [' Clean '],function() { returnGulp. SRC (["./" +sdir+ "/js/jquery.js", "./" +sdir+ "/js/main.js"]). Pipe (Concat (' Index.js ') . Pipe (Uglify ()). Pipe (Gulp.dest ('./' +ddir+ '/js/'));}); Gulp.task (' Processhtml ', [' Clean '],function () { returnGULP.SRC ('./' +sdir+ '/*.html '). Pipe (Processhtml ()). Pipe (Gulp.dest ('./' +ddir+ '/'));}); Gulp.task (' Default ',function() {Gulp.start (' Move ', ' Concat-minify-css ', ' Concat-uglify-script-index ', ' Processhtml ');});
About processhtml people may use less, here is a brief introduction.
For example we have such a file:
<!Doctype HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Test</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/base.css"> <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css"></Head><Body> <DivID= "Main"></Div> <Scriptsrc= "Js/jquery.js"></Script> <Scriptsrc= "Js/main.js"></Script></Body></HTML>
Finally, we want the code to be compressed to output such a file:
<!Doctype HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Test</title> <Linkrel= "stylesheet"type= "Text/css"href= "Css/index.css"></Head><Body> <DivID= "Main"></Div> <Scriptsrc= "Js/index.js"></Script></Body></HTML>
So what to do, here is to use the processhtml, in need to replace the place to add a special mark, and then replace with processhtml, marked as follows:
<!Doctype HTML><HTML><Head> <MetaCharSet= "Utf-8"> <title>Test</title> <!--build:css css/index.css - <Linkrel= "stylesheet"type= "Text/css"href= "Css/base.css"> <Linkrel= "stylesheet"type= "Text/css"href= "Css/style.css"> <!--/build -</Head><Body> <DivID= "Main"></Div> <!--Build:js js/index.js - <Scriptsrc= "Js/jquery.js"></Script> <Scriptsrc= "Js/main.js"></Script> <!--/build -</Body></HTML>
This tool is still very useful.
Clear, move, compress, merge, replace code with gulp
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
