{"id":782,"date":"2015-08-26T13:39:27","date_gmt":"2015-08-26T05:39:27","guid":{"rendered":"http:\/\/www.bluesdream.com\/blog\/?p=782"},"modified":"2016-07-14T14:08:43","modified_gmt":"2016-07-14T06:08:43","slug":"gulp-frontend-automation-plugins-instructions","status":"publish","type":"post","link":"https:\/\/www.bluesdream.com\/blog\/gulp-frontend-automation-plugins-instructions.html","title":{"rendered":"Gulp\u6784\u5efa\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u4f5c\u6d41\u4e4b\uff1a\u5e38\u7528\u63d2\u4ef6\u4ecb\u7ecd\u53ca\u4f7f\u7528"},"content":{"rendered":"<p>\u5728\u5bf9Gulp\u6709\u4e86\u4e00\u4e2a\u521d\u6b65\u7684\u4e86\u89e3\u4e4b\u540e\uff0c\u6211\u4eec\u5f00\u59cb\u6784\u5efa\u4e00\u4e2a\u8f83\u4e3a\u5b8c\u6574\u7684Gulp\u5f00\u53d1\u73af\u5883\u3002<\/p>\n<p>\u672c\u6587\u4e3b\u8981\u5206\u4e3a6\u4e2a\u6bb5\u843d\uff1a<\/p>\n<ul>\n<li>1&#46; \u6784\u5efa\u9879\u76ee\u76ee\u5f55\u7ed3\u6784\uff08Directory Structure Build\uff09<\/li>\n<li>2&#46; \u63d2\u4ef6\u4ecb\u7ecd\u53ca\u4f7f\u7528\u65b9\u6cd5\uff08Tasks and dependencies\uff09<\/li>\n<li>3&#46; \u6269\u5c55\u4f18\u5316\uff08Extend &amp; Optimize Task\uff09<\/li>\n<li>4&#46; \u5176\u4ed6\u63d2\u4ef6\u4ecb\u7ecd\uff08Other plug-ins\uff09<\/li>\n<li>5&#46; \u5339\u914d\u89c4\u5219\uff08Match Files\uff09<\/li>\n<li>6&#46; \u6ce8\u610f\u4e8b\u9879\uff08Attention\uff09<\/li>\n<\/ul>\n<p>\u5173\u4e8eGulp\u7684\u5165\u95e8\u4ecb\u7ecd\u53ca\u5b89\u88c5\u65b9\u6cd5\uff0c\u53ef\u5148\u53bb<a href=\"http:\/\/www.bluesdream.com\/blog\/gulp-frontend-automation-introduction-and-livereload.html\" title=\"Gulp\u6784\u5efa\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u4f5c\u6d41\u4e4b\uff1a\u5165\u95e8\u4ecb\u7ecd\u53caLiveReload\u7684\u4f7f\u7528\">\u300aGulp\u6784\u5efa\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u4f5c\u6d41\u4e4b\uff1a\u5165\u95e8\u4ecb\u7ecd\u53caLiveReload\u7684\u4f7f\u7528\u300b<\/a> \u8fd9\u7bc7\u6587\u7ae0\u67e5\u770b\u3002\u5bf9\u5176\u6709\u4e2a\u521d\u6b65\u8ba4\u8bc6\u540e\uff0c\u4fbf\u4e8e\u540e\u6587\u7684\u7406\u89e3\u3002<!--more--><\/p>\n<h3>1. \u6784\u5efa\u9879\u76ee\u76ee\u5f55\u7ed3\u6784\uff08Directory Structure Build\uff09<\/h3>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n+ my-gulp\uff08\u9879\u76ee\u6587\u4ef6\u5939\uff09\r\n\t+ node_modules Gulp\u7ec4\u4ef6\u76ee\u5f55\r\n\t+ dist \u53d1\u5e03\u73af\u5883\r\n\t+ css \u7f16\u8bd1\u540e\u7684CSS\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\t+ images \u538b\u7f29\u540e\u7684\u56fe\u7247\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\t+ js \u7f16\u8bd1\u540e\u7684JS\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\u3000\u3000\u2500 html \u9759\u6001\u6587\u4ef6\r\n\t+ src \u5f00\u53d1\u73af\u5883\r\n\t+ sass SASS\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\t+ images \u56fe\u7247\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\t+ js JS\u6587\u4ef6\r\n\t\t\u2500 etc...\r\n\t\u2500 html \u9759\u6001\u6587\u4ef6\r\n\t\u2500 gulpfile.js Gulp\u4efb\u52a1\u6587\u4ef6\r\n\r\n\u6ce8\uff1a\r\n+ \u8868\u793a\u76ee\u5f55  \u2500 \u8868\u793a\u6587\u4ef6\r\n<\/pre>\n<h3>2. \u63d2\u4ef6\u4ecb\u7ecd\u53ca\u4f7f\u7528\u65b9\u6cd5\uff08Tasks and dependencies\uff09<\/h3>\n<h4>2.1 HTML\u5904\u7406\uff08HTML Task\uff09<\/h4>\n<p>\u4ec5\u628a\u5f00\u53d1\u73af\u5883\u4e2d\u7684HTML\u6587\u4ef6\uff0c\u79fb\u52a8\u81f3\u53d1\u5e03\u73af\u5883\u3002<\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\ngulp.task('html', function() {\r\n\treturn gulp.src('src\/**\/*.html') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe('dist'); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp html<\/code><\/p>\n<h4>2.2 \u6837\u5f0f\u5904\u7406\uff08CSS Task\uff09<\/h4>\n<h5>CSS\u9884\u5904\u7406\/Sass\u7f16\u8bd1 (<a href=\"https:\/\/www.npmjs.com\/package\/gulp-ruby-sass\">gulp-ruby-sass<\/a>) \uff1a<\/h5>\n<p>\u76f8\u6bd4\u8f83glup-sass\u800c\u8a00\uff0c\u901f\u5ea6\u4f1a\u7a0d\u8bb8\u6162\u70b9\uff0c\u4f46\u529f\u80fd\u66f4\u591a\u5e76\u4e14\u7a33\u5b9a\u3002<\/p>\n<p>\u5b89\u88c5SASS\uff1a<br \/>\n1. \u50cfGulp\u57fa\u4e8eNode.js\u4e00\u6837\uff0cSass\u57fa\u4e8eRuby\u73af\u5883\uff0c\u6240\u4ee5\u6211\u4eec\u5148\u53bb\u5b98\u7f51\u4e0b\u8f7d\u5e76\u5b89\u88c5<a href=\"http:\/\/rubyinstaller.org\/downloads\">Ruby<\/a>\uff08\u5728\u5b89\u88c5\u7684\u65f6\u5019\uff0c\u8bf7\u52fe\u9009<code>Add Ruby executables to your PATH<\/code>\u8fd9\u4e2a\u9009\u9879\uff0c\u6dfb\u52a0\u73af\u5883\u53d8\u91cf\uff0c\u4e0d\u7136\u4ee5\u540e\u4f7f\u7528\u7f16\u8bd1\u8f6f\u4ef6\u7684\u65f6\u5019\u4f1a\u63d0\u793a\u627e\u4e0d\u5230ruby\u73af\u5883\uff09\u3002<br \/>\n2. \u5b89\u88c5\u5b8cruby\u4e4b\u540e\uff0c\u5728\u5f00\u59cb\u83dc\u5355\u4e2d\uff0c\u627e\u5230\u521a\u624d\u6211\u4eec\u5b89\u88c5\u7684ruby\uff0c\u6253\u5f00<code>Start Command Prompt with Ruby<\/code><br \/>\n3. \u7136\u540e\u76f4\u63a5\u5728\u547d\u4ee4\u884c\u4e2d\u8f93\u5165<code>gem install sass<\/code>\u6309\u56de\u8f66\u952e\u786e\u8ba4\uff0c\u7b49\u5f85\u4e00\u6bb5\u65f6\u95f4\u5c31\u4f1a\u63d0\u793a\u4f60sass\u5b89\u88c5\u6210\u529f\u3002<\/p>\n<blockquote><p>\n  \u6ce8\uff1a<br \/>\n  \u7531\u4e8e\u8fd1\u671f\u5899\u7684\u6bd4\u8f83\u4e25\u91cd\uff0c\u5916\u52a0\uff08\u4e0a\u6d77\uff09\u7535\u4fe1\u9650\u5236\u4e86\u5916\u7f51\u8bbf\u95ee\u901f\u5ea6\u3002\u5982\u679c\u5b89\u88c5\u5931\u8d25\uff0c\u8bf7\u4f7f\u7528\u6dd8\u5b9d\u7684Ruby\u955c\u50cf\u3002\u5177\u4f53\u64cd\u4f5c\u65b9\u6cd5\u8bf7\u53c2\u8003<a href=\"http:\/\/www.w3cplus.com\/sassguide\/install.html\">\u6dd8\u5b9dRubyGems\u955c\u50cf\u5b89\u88c5 sass<\/a>\u3002\n<\/p><\/blockquote>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-ruby-sass --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar sass = require('gulp-ruby-sass'); \/\/ sass\/scss\u7f16\u8bd1\r\n\r\ngulp.task('sass', function () {\r\n     return sass('src\/css', { style: 'compressed' }) \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\uff08style: 'compressed' \u8868\u793a\u8f93\u51fa\u683c\u5f0f\uff09\r\n          .on('error', function (err) {\r\n               console.error('Error!', err.message); \/\/ \u663e\u793a\u9519\u8bef\u4fe1\u606f\r\n          })\r\n          .pipe(gulp.dest('dist\/css')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp sass<\/code><\/p>\n<p>\u63d2\u4ef6\u63d0\u4f9b4\u79cd\u8f93\u51fa\u683c\u5f0f\uff1a<br \/>\nnested\uff1a\u5d4c\u5957\u7f29\u8fdb\u7684css\u4ee3\u7801\uff0c\u5b83\u662f\u9ed8\u8ba4\u503c\u3002<br \/>\nexpanded\uff1a\u6ca1\u6709\u7f29\u8fdb\u7684\u3001\u6269\u5c55\u7684css\u4ee3\u7801\u3002<br \/>\ncompact\uff1a\u7b80\u6d01\u683c\u5f0f\u7684css\u4ee3\u7801\u3002<br \/>\ncompressed\uff1a\u538b\u7f29\u540e\u7684css\u4ee3\u7801\u3002<\/p>\n<blockquote><p>\n  \u6ce8\uff1a<br \/>\n  \u4f7f\u7528\u524d\u6e05\u770b\u6e05 gulp-ruby-sass \u5199\u6cd5\uff0c\u4e0d\u8981\u76f4\u63a5\u62ff gulp-sass \u7684\u5199\u6cd5\u6765\u5957\u7528\uff0c\u4e24\u8005\u5e76\u4e0d\u5b8c\u5168\u76f8\u540c\u3002\n<\/p><\/blockquote>\n<h4>2.3 \u811a\u672c\u538b\u7f29&amp;\u91cd\u547d\u540d\uff08Javascript Task\uff09<\/h4>\n<h5>JS\u6587\u4ef6\u538b\u7f29(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-uglify\">gulp-uglify<\/a>)\uff1a<\/h5>\n<p>\u4f7f\u7528uglify\u5f15\u64ce\u538b\u7f29JS\u6587\u4ef6\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-uglify --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar uglify = require('gulp-uglify'); \/\/ js\u538b\u7f29\r\n\r\ngulp.task('script', function() {\r\n\treturn gulp.src('src\/js\/*.js') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe(uglify({ preserveComments:'some' })) \/\/ \u4f7f\u7528uglify\u8fdb\u884c\u538b\u7f29\uff0c\u5e76\u4fdd\u7559\u90e8\u5206\u6ce8\u91ca\r\n\t\t.pipe(gulp.dest('dist\/js')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp script<\/code><\/p>\n<h4>2.4 \u56fe\u7247\u5904\u7406\uff08Image Task\uff09<\/h4>\n<h5>\u56fe\u7247\u538b\u7f29(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-imagemin\">gulp-imagemin<\/a>) + \u6df1\u5ea6\u538b\u7f29(<a href=\"https:\/\/www.npmjs.com\/package\/imagemin-pngquant\">imagemin-pngquant<\/a>)\uff1a<\/h5>\n<p>\u538b\u7f29PNG\u3001JPEG\u3001GIF\u548cSVG\u56fe\u50cf\u3002<br \/>\ngulp-imagemin\u96c6\u6210\u4e86<a href=\"https:\/\/github.com\/kevva\/imagemin-gifsicle\">gifsicle<\/a> \u3001<a href=\"https:\/\/github.com\/kevva\/imagemin-jpegtran\">jpegtran<\/a> \u3001<a href=\"https:\/\/github.com\/kevva\/imagemin-optipng\">optipng<\/a> \u3001<a href=\"https:\/\/github.com\/kevva\/imagemin-svgo\">svgo<\/a> \u8fd94\u4e2a\u63d2\u4ef6\u3002\u800cimagemin-pngquant\u662fimagemin\u63d2\u4ef6\u7684\u4e00\u4e2a\u6269\u5c55\u63d2\u4ef6\uff0c\u7528\u4e8e\u6df1\u5ea6\u538b\u7f29\u56fe\u7247\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-imagemin imagemin-pngquant --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar imagemin = require('gulp-imagemin'), \/\/ \u56fe\u7247\u538b\u7f29\r\n\tpngquant = require('imagemin-pngquant'); \/\/ \u6df1\u5ea6\u538b\u7f29\r\n\r\ngulp.task('images', function(){\r\n\treturn gulp.src('src\/images\/**\/*.{png,jpg,gif,svg}') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe(imagemin({\r\n\t\t\tprogressive: true, \/\/ \u65e0\u635f\u538b\u7f29JPG\u56fe\u7247\r\n\t\t\tsvgoPlugins: &#x5B;{removeViewBox: false}], \/\/ \u4e0d\u79fb\u9664svg\u7684viewbox\u5c5e\u6027\r\n\t\t\tuse: &#x5B;pngquant()] \/\/ \u4f7f\u7528pngquant\u63d2\u4ef6\u8fdb\u884c\u6df1\u5ea6\u538b\u7f29\r\n\t\t}))\r\n\t\t.pipe(gulp.dest('dist\/images')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp images<\/code><\/p>\n<blockquote><p>\n  \u6ce8\uff1a<br \/>\n  \u4e00\u822c\u6211\u4eec\u6240\u4f7f\u7528\u7684\u56fe\u7247\u538b\u7f29\u65b9\u6cd5\uff0c\u90fd\u4f1a\u5bf9\u56fe\u50cf\u9020\u6210\u4e00\u5b9a\u7684\u635f\u5931\uff0c\u8fd9\u4e2a\u548c\u538b\u7f29\u6bd4\u7387\u6709\u4e00\u5b9a\u7684\u5173\u7cfb\u3002\u901a\u5e38\u6211\u4eec\u6240\u8bf4\u7684\u65e0\u635f\u538b\u7f29\uff0c\u4e5f\u53ea\u662f\u63a7\u5236\u5728\u6211\u4eec\u8089\u773c\u96be\u4ee5\u53d1\u73b0\u7684\u8303\u56f4\u5185\u3002\u6362\u53e5\u8bdd\u6765\u8bf4\uff0c\u5728\u4f60\u4fdd\u5b58\u5207\u56fe\u7684\u540c\u65f6\uff0c\u5176\u5b9e\u5df2\u7ecf\u5bf9\u56fe\u50cf\u9020\u6210\u4e86\u4e00\u5b9a\u7684\u635f\u5931\uff0c\u56e0\u4e3a\u6ca1\u4ec0\u4e48\u4eba\u4f1a\u9009\u62e9100%\u6700\u4f73\u8d28\u91cf\u5bfc\u51fa\u56fe\u7247\u3002\u4e24\u8005\u662f\u5dee\u4e0d\u591a\u7684\u6982\u5ff5\u3002\n<\/p><\/blockquote>\n<h4>2.5 \u81ea\u52a8\u5237\u65b0\uff08LiveReload Task\uff09<\/h4>\n<h5>\u7f51\u9875\u81ea\u52a8\u5237\u65b0\uff08\u6587\u4ef6\u53d8\u52a8\u540e\u5373\u65f6\u5237\u65b0\u9875\u9762\uff09(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-livereload\">gulp-livereload<\/a>) + \u9759\u6001\u670d\u52a1\u5668\uff1a(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-webserver\">gulp-webserver<\/a>)\uff1a<\/h5>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-livereload gulp-webserver --save-dev<\/code><\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar livereload = require('gulp-livereload'), \/\/ \u7f51\u9875\u81ea\u52a8\u5237\u65b0\uff08\u6587\u4ef6\u53d8\u52a8\u540e\u5373\u65f6\u5237\u65b0\u9875\u9762\uff09\r\n\twebserver = require('gulp-webserver'); \/\/ \u672c\u5730\u670d\u52a1\u5668\r\n\r\n\/\/ \u6ce8\u518c\u4efb\u52a1\r\ngulp.task('webserver', function() {\r\n\tgulp.src( '.' ) \/\/ \u670d\u52a1\u5668\u76ee\u5f55\uff08.\u4ee3\u8868\u6839\u76ee\u5f55\uff09\r\n\t.pipe(webserver({ \/\/ \u8fd0\u884cgulp-webserver\r\n\t\tlivereload: true, \/\/ \u542f\u7528LiveReload\r\n\t\topen: true \/\/ \u670d\u52a1\u5668\u542f\u52a8\u65f6\u81ea\u52a8\u6253\u5f00\u7f51\u9875\r\n\t}));\r\n});\r\n\r\n\/\/ \u76d1\u542c\u4efb\u52a1\r\ngulp.task('watch',function(){\r\n\t\/\/ \u76d1\u542c html\r\n\tgulp.watch('src\/**\/*.html', &#x5B;'html'])\r\n\t\/\/ \u76d1\u542c scss\r\n\tgulp.watch('src\/scss\/*.scss', &#x5B;'css']);\r\n\t\/\/ \u76d1\u542c images\r\n\tgulp.watch('src\/images\/**\/*.{png,jpg,gif,svg}', &#x5B;'images']);\r\n\t\/\/ \u76d1\u542c js\r\n\tgulp.watch('src\/js\/*.js', &#x5B;'script']);\r\n});\r\n \r\n\/\/ \u9ed8\u8ba4\u4efb\u52a1\r\ngulp.task('default',&#x5B;'webserver','watch']);\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp<\/code><\/p>\n<h3>3. \u6269\u5c55\u4f18\u5316\uff08Extend &amp; Optimize Task\uff09<\/h3>\n<p>\u81f3\u6b64\uff0c<code>\u4e00\u5957\u7b80\u5355\u7684\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u4f5c\u6d41\/Gulp\u5de5\u4f5c\u6d41\u4fbf\u5df2\u7ecf\u5b8c\u6210<\/code>\u3002\u73b0\u5728\uff0c\u6211\u4eec\u5f00\u59cb\u4f18\u5316\u5e76\u6269\u5c55\u8fd9\u4e9b\u63d2\u4ef6\uff0c\u4f7f\u6211\u4eec\u7684\u5de5\u4f5c\u6d41\u66f4\u4e3a\"\u667a\u80fd\"\u3002<\/p>\n<h5>3.1 \u6587\u4ef6\u91cd\u547d\u540d(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-rename\">gulp-rename<\/a>)\uff1a<\/h5>\n<p>\u50cfjQuery\u4e00\u6837\uff0c\u901a\u5e38\u4e3a\u4e86\u8868\u793a\u8be5\u6587\u4ef6\u662f\u538b\u7f29\u7248\uff0c\u4f1a\u5728\u6587\u4ef6\u540d\u540e\u52a0\u4e0a .min \u540e\u7f00\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-rename --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar uglify = require('gulp-uglify'), \/\/ js\u538b\u7f29\r\n\trename = require('gulp-rename'); \/\/ \u6587\u4ef6\u91cd\u547d\u540d\r\n\r\ngulp.task('script', function() {\r\n\treturn gulp.src('src\/js\/*.js') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe(rename({ suffix: '.min' })) \/\/ \u91cd\u547d\u540d\r\n\t\t.pipe(uglify({ preserveComments:'some' })) \/\/ \u4f7f\u7528uglify\u8fdb\u884c\u538b\u7f29\uff0c\u5e76\u4fdd\u7559\u90e8\u5206\u6ce8\u91ca\r\n\t\t.pipe(gulp.dest('dist\/js')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp script<\/code><\/p>\n<h5>3.2 \u6765\u6e90\u5730\u56fe(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-sourcemaps\">gulp-sourcemaps<\/a>)\uff1a<\/h5>\n<p>\u8fd9\u662f\u4e2a\u975e\u5e38\u6709\u7528\u7684\u63d2\u4ef6\uff0c\u6211\u4eec\u5728\u538b\u7f29\u3001\u5408\u5e76\u7b49\u64cd\u4f5c\u4e4b\u540e\uff0c\u8c03\u8bd5\u65f6\u6240\u770b\u5230\u7684\u5185\u5bb9\uff0c\u90fd\u662f\u7f16\u8bd1\u540e\u7684\u4ee3\u7801\u3002\u8fd9\u6837\u5c31\u5bfc\u81f4\u4e00\u4e2a\u95ee\u9898\uff0c\u8c03\u8bd5\u8fc7\u7a0b\u4e2d\u65e0\u6cd5\u548c\u6e90\u7801\uff08\u7f16\u8bd1\u65f6\u7684\u4ee3\u7801\uff09\u4f4d\u7f6e\u76f8\u5bf9\u5e94\uff0c\u8ba9\u8c03\u8bd5\u53d8\u7684\u5341\u5206\u56f0\u96be\u3002<br \/>\n\u4f8b\u5982\uff1a\u4e00\u4e2ajQuery\uff0c\u6e90\u7801\u63a5\u8fd11\u4e07\u884c\u3002\u4f46\u538b\u7f29\u540e\u53ea\u6709\u77ed\u77ed\u76843~4\u884c\uff0c\u5e76\u4e14\u53d8\u91cf\u540d\u79f0\u4e5f\u5df2\u53d1\u751f\u6539\u53d8\u3002\u6b64\u65f6\u4e00\u65e6\u62a5\u9519\uff0c\u4f60\u5f88\u96be\u4ece\u9519\u8bef\u4fe1\u606f\u4e2d\u76f4\u63a5\u627e\u5230\u5bf9\u5e94\u4ee3\u7801\u7684\u539f\u59cb\u4f4d\u7f6e\u3002\u540c\u6837\uff0cCSS\u4e5f\u4f1a\u9047\u5230\u7c7b\u4f3c\u95ee\u9898\u3002<br \/>\n\u800csourcemaps\u4f5c\u7528\uff0c\u4fbf\u662f\u6210\u4e00\u4e2a<code>.map<\/code>\u6587\u4ef6\uff0c\u91cc\u9762\u50a8\u5b58\u7740\u5bf9\u5e94\u7684\u6e90\u7801\u4f4d\u7f6e\u3002\u5e76\u5185\u5d4c\u5728\u4f60\u8f6c\u6362\u540e\u7684\u6587\u4ef6\u5e95\u90e8<code>\/*# sourceMappingURL=maps\/filename.css.map *\/<\/code>\u3002\u8fd9\u6837\u5728\u6211\u4eec\u8c03\u8bd5\u65f6\uff0c\u5c31\u4f1a\u76f4\u63a5\u663e\u793a\uff08\u6620\u5c04\uff09\u6e90\u7801\uff0c\u800c\u4e0d\u65f6\u7f16\u8bd1\u540e\u7684\u4ee3\u7801\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-sourcemaps --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar uglify = require('gulp-uglify'), \/\/ js\u538b\u7f29\r\n\trename = require('gulp-rename'), \/\/ \u6587\u4ef6\u91cd\u547d\u540d\r\n\tsourcemaps = require('gulp-sourcemaps'); \/\/ \u6765\u6e90\u5730\u56fe\r\n\r\ngulp.task('script', function() {\r\n\treturn gulp.src(&#x5B;'src\/js\/*.js','!*.min.js']) \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\uff0c\u6392\u9664 .min.js \u540e\u7f00\u7684\u6587\u4ef6\r\n\t\t.pipe(sourcemaps.init()) \/\/ \u6267\u884csourcemaps\r\n\t\t.pipe(rename({ suffix: '.min' })) \/\/ \u91cd\u547d\u540d\r\n\t\t.pipe(uglify({ preserveComments:'some' })) \/\/ \u4f7f\u7528uglify\u8fdb\u884c\u538b\u7f29\uff0c\u5e76\u4fdd\u7559\u90e8\u5206\u6ce8\u91ca\r\n\t\t.pipe(sourcemaps.write('maps')) \/\/ \u5730\u56fe\u8f93\u51fa\u8def\u5f84\uff08\u5b58\u653e\u4f4d\u7f6e\uff09\r\n\t\t.pipe(gulp.dest('dist\/js')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp script<\/code><\/p>\n<h5>3.3 \u53ea\u64cd\u4f5c\u6709\u8fc7\u4fee\u6539\u7684\u6587\u4ef6(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-changed\">gulp-changed<\/a>)\uff1a<\/h5>\n<p>\u6bd4\u5982\u6211\u4eec\u670920\u4e2a\u6587\u4ef6\uff0c\u5f53\u4f60\u4fee\u6539\u5176\u4e2d1\u4e2a\u6587\u4ef6\u65f6\uff0c\u7531\u4e8e\u4efb\u52a1\u7684\u5c40\u9650\u6027\uff0c\u4e5f\u4f1a\u628a\u5176\u4f5919\u5339\u914d\u7684\u65e0\u8f9c\u7684\u540c\u7c7b\u7ed9\u4e00\u5e76\u8fdb\u884c\u5904\u7406\uff0c\u8fd9\u6837\u5c31\u5927\u5927\u964d\u4f4e\u4e86\u6548\u7387\u3002\u800c <code>gulp-changed<\/code> \u63d2\u4ef6\uff0c\u4f1a\u9996\u5148\u628a\u6587\u4ef6\u8fdb\u884c\u6bd4\u5bf9\uff0c\u5982\u679c\u6587\u4ef6\u6ca1\u6709\u6539\u52a8\uff0c\u5219\u8df3\u8fc7\u540e\u7eed\u4efb\u52a1\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-changed --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar imagemin = require('gulp-imagemin'), \/\/ \u56fe\u7247\u538b\u7f29\r\n\tpngquant = require('imagemin-pngquant'), \/\/ \u6df1\u5ea6\u538b\u7f29\r\n\tchanged = require('gulp-changed'); \/\/ \u53ea\u64cd\u4f5c\u6709\u8fc7\u4fee\u6539\u7684\u6587\u4ef6\r\n\r\ngulp.task('images', function(){\r\n\treturn gulp.src('src\/images\/**\/*.{png,jpg,gif,svg}') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe(changed('dist\/images')) \/\/ \u5bf9\u6bd4\u6587\u4ef6\u662f\u5426\u6709\u8fc7\u6539\u52a8\uff08\u6b64\u5904\u586b\u5199\u7684\u8def\u5f84\u548c\u8f93\u51fa\u8def\u5f84\u4fdd\u6301\u4e00\u81f4\uff09\r\n\t\t.pipe(imagemin({\r\n\t\t\tprogressive: true, \/\/ \u65e0\u635f\u538b\u7f29JPG\u56fe\u7247\r\n\t\t\tsvgoPlugins: &#x5B;{removeViewBox: false}], \/\/ \u4e0d\u79fb\u9664svg\u7684viewbox\u5c5e\u6027\r\n\t\t\tuse: &#x5B;pngquant()] \/\/ \u4f7f\u7528pngquant\u63d2\u4ef6\u8fdb\u884c\u6df1\u5ea6\u538b\u7f29\r\n\t\t}))\r\n\t\t.pipe(gulp.dest('dist\/images')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp images<\/code><\/p>\n<p>\u6b64\u65f6\u6211\u4eec\u518d\u53bb <code>dist\/images<\/code> \u6587\u4ef6\u5939\uff0c\u67e5\u770b\u6bcf\u4e2a\u56fe\u7247\u7684\u6700\u540e\u4fee\u6539\u65e5\u671f\uff0c\u4f60\u5c31\u4f1a\u53d1\u73b0\u53ea\u9488\u5bf9\u4f60\u521a\u624d\u4fee\u6539\u8fc7\u7684\u56fe\u7247\uff08\u6587\u4ef6\uff09\u884c\u4e86\u5904\u7406\uff0c\u800c\u90a3\u4e9b\u4e4b\u524d\u5df2\u7ecf\u5904\u7406\u8fc7\u7684\u56fe\u7247\u5219\u6ca1\u6709\u518d\u8fdb\u884c\u64cd\u4f5c\u3002<\/p>\n<blockquote><p>\n  \u6ce8\uff1a<br \/>\n  \u65e0\u8bba\u662f gulp-changed \u8fd8\u662f\u4e0b\u6587\u4e2d\u63d0\u5230\u7684 gulp-cache \uff0c\u5bf9 sass \u6587\u4ef6\u65e0\u6548\uff0c\u59cb\u7ec8\u4f1a\u5bf9\u6240\u6709\u5339\u914d\u6587\u4ef6\u8fdb\u884c\u64cd\u4f5c\u3002\n<\/p><\/blockquote>\n<h5>3.4 \u6587\u4ef6\u5408\u5e76(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-concat\">gulp-concat<\/a>)\uff1a<\/h5>\n<p>\u6bd4\u5982\u6211\u4eec\u6709\u591a\u4e2aJS\u5e93\uff0cjquery.min.js\u3001bootstrap.min.js\u3001angular.min.js\u3002\u6b64\u65f6\u53ef\u4ee5\u901a\u8fc7\u5408\u5e76\uff0c\u51cf\u5c11\u7f51\u7edc\u8bf7\u6c42\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-concat --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar concat = require(&quot;gulp-concat&quot;); \/\/ \u6587\u4ef6\u5408\u5e76\r\n \r\ngulp.task('concat', function () {\r\n    gulp.src('js\/*.min.js')  \/\/ \u8981\u5408\u5e76\u7684\u6587\u4ef6\r\n    .pipe(concat('libs.js'))  \/\/ \u5408\u5e76\u6210libs.js\r\n    .pipe(gulp.dest('dist\/js'));\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp concat<\/code><\/p>\n<h5>3.5 \u6587\u4ef6\u6e05\u7406(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-clean\">gulp-clean<\/a>)\uff1a<\/h5>\n<p>\u7b80\u5355\u7684\u8bf4\uff0c\u5c31\u662f\u4e00\u952e\u5220\u9664\uff08\u6e05\u7406\uff09\u6587\u4ef6\u3002\u5c31\u62ff\u4e3a\u4e86\u8c03\u8bd5\u6240\u751f\u6210\u7684 .map \u6587\u4ef6\u4e3a\u4f8b\uff0c\u5728\u6b63\u5f0f\u53d1\u5e03\u65f6\u5e76\u4e0d\u9700\u8981\uff0c\u6b64\u65f6\u6211\u4eec\u5c31\u80fd\u901a\u8fc7 clean\u4efb\u52a1\u8fdb\u884c\u6e05\u7406\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-clean --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar clean = require('gulp-clean'); \/\/ \u6587\u4ef6\u6e05\u7406\r\n\r\ngulp.task('clean', function() {\r\n\treturn gulp.src(&#x5B;'dist\/css\/maps','dist\/js\/maps'], {read: false})\r\n\t\t.pipe(clean());\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp clean<\/code><\/p>\n<h3>4. \u5176\u4ed6\u63d2\u4ef6\u4ecb\u7ecd\uff08Other plug-ins\uff09<\/h3>\n<p>\u8fd9\u90e8\u5206\u63d2\u4ef6\u4f5c\u4e3a\u6269\u5c55\u9605\u8bfb\uff0c\u53ea\u505a\u7b80\u5355\u4ecb\u7ecd\u3002\u6bcf\u4e2a\u63d2\u4ef6\u90fd\u6709\u6bcf\u4e2a\u63d2\u4ef6\u7684\u7279\u6027\uff0c\u6839\u636e\u4f60\u7684\u559c\u597d\u548c\u5b9e\u9645\u64cd\u4f5c\u73af\u5883\u800c\u5b9a\uff0c\u841d\u535c\u9752\u83dc\u5404\u6709\u6240\u7231\u3002\u7528\u7684\u4eba\u6700\u591a\u7684\uff0c\u4e0d\u4ee3\u8868\u5c31\u662f\u9002\u5408\u4f60\u7684\u3002\u603b\u4e4b\uff0c\u6709\u65f6\u95f4\u6709\u7cbe\u529b\u7684\uff0c\u53ef\u4ee5\u591a\u8bd5\u8bd5\uff0c\u591a\u73a9\u73a9\uff0c\u591a\u914d\u914d\uff0c\u8fd9\u91cc\u4e5f\u53ea\u662f\u51b0\u5c71\u4e00\u89d2\u3002<\/p>\n<h4>4.1 CSS\u7c7b<\/h4>\n<h5>1. CSS\u538b\u7f29 (<a href=\"https:\/\/www.npmjs.com\/package\/gulp-minify-css\">gulp-minify-css<\/a>)<\/h5>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-minify-css --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar minifyCss = require('gulp-minify-css'); \/\/ CSS\u538b\u7f29\r\n\r\ngulp.task('minify-css', function() {\r\n\treturn gulp.src('css\/*.css')\r\n\t\t.pipe(gulp.dest('dist'));\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp minify-css<\/code><\/p>\n<h5>2. CSS\u9884\u5904\u7406\/Less\u7f16\u8bd1 (<a href=\"https:\/\/www.npmjs.com\/package\/gulp-less\">gulp-less<\/a>)<\/h5>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-autoprefixer --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar less = require('gulp-less'); \/\/ LESS\u7f16\u8bd1\r\n\r\ngulp.task('less', function () {\r\n    gulp.src('src\/less\/*.less')\r\n        .pipe(less())\r\n        .pipe(gulp.dest('src\/css'));\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp less<\/code><\/p>\n<h5>3. \u81ea\u52a8\u6dfb\u52a0CSS3\u6d4f\u89c8\u5668\u524d\u7f00(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-autoprefixer\">gulp-autoprefixer<\/a>):<\/h5>\n<p><a href=\"http:\/\/leaverou.github.io\/prefixfree\/\">-prefix-free<\/a> \u5927\u5bb6\u80af\u5b9a\u90fd\u6bd4\u8f83\u719f\uff0c\u4f1a\u81ea\u52a8\u4e3aCSS\u6dfb\u52a0\u4e0a\u6d4f\u89c8\u5668\u7684\u524d\u7f00\uff0c\u5e2e\u4f60\u6446\u8131\u524d\u7f00\u75db\u82e6\u3002\u800c <code>gulp-autoprefixer<\/code> \u63d2\u4ef6\u540c\u6837\u5982\u6b64\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-autoprefixer --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar autoprefixer = require('gulp-autoprefixer'); \/\/ \u81ea\u52a8\u6dfb\u52a0CSS3\u6d4f\u89c8\u5668\u524d\u7f00\r\n\r\ngulp.task('prefix', function () {\r\n    gulp.src('src\/css\/*.less')\r\n        .pipe(less())\r\n        .pipe(gulp.dest('src\/css'));\r\n});\r\n\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar sass = require('gulp-ruby-sass'), \/\/ sass\/scss\u7f16\u8bd1\r\n\tautoprefixer = require('gulp-autoprefixer'); \/\/ \u81ea\u52a8\u6dfb\u52a0CSS3\u6d4f\u89c8\u5668\u524d\u7f00\r\n\r\ngulp.task('sass', function () {\r\n\treturn sass('src\/css', { style: 'compressed' }) \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.on('error', function (err) {\r\n\t\t\tconsole.error('Error!', err.message); \/\/ \u663e\u793a\u9519\u8bef\u4fe1\u606f\r\n\t\t})\r\n\t\t.pipe(autoprefixer({\r\n\t\t\tbrowsers: &#x5B;'last 2 versions'], \/\/ \u4e3b\u6d41\u6d4f\u89c8\u5668\u7684\u6700\u65b0\u4e24\u4e2a\u7248\u672c\r\n\t\t\tcascade: false \/\/ \u662f\u5426\u7f8e\u5316\u5c5e\u6027\u503c\r\n\t\t}))\r\n\t\t.pipe(gulp.dest('dist\/css')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp sass<\/code><\/p>\n<h4>4.2 \u56fe\u50cf\u7c7b<\/h4>\n<h5>1. \u4f7f\u7528TinyPN API\u538b\u7f29\u56fe\u7247(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-tinypng\">gulp-tinypng<\/a>)\uff1a<\/h5>\n<p>\u4f7f\u7528TinyPNG\u5b98\u65b9API\u8fdb\u884c\u56fe\u7247\u538b\u7f29\u3002\u6211\u4e2a\u4eba\u6bd4\u8f83\u559c\u6b22\u8fd9\u4e2a\uff0c\u56e0\u4e3a\u4e4b\u524d\u4e00\u76f4\u6709\u5728\u4f7f\u7528\u3002\u4f46\u7531\u4e8eTinyPNG\u670d\u52a1\u5668\u5728\u56fd\u5916\uff0c\u6709\u65f6\u6267\u884c\u8d77\u6765\u4f1a\u5f88\u6162\uff0c\u9664\u975e\u4f60\u6709VPN\uff0c\u6240\u4ee5\u5728\u8fd9\u53ea\u505a\u7b80\u5355\u4ecb\u7ecd\u3002<br \/>\n\u7ecf\u8fc7\u6211\u7684\u6d4b\u8bd5\uff0cgulp-tinypng\u538b\u7f29\u540e\u7684\u56fe\u7247\u5927\u5c0f\uff0c\u76f8\u5f53\u4e8e\u4f7f\u7528imagemin-pngquant\u6df1\u5ea6\u538b\u7f29\u540e\u7684\u5927\u5c0f\u3002\u4f7f\u7528\u65f6\u9700\u5148\u6ce8\u518cTinyPNG\u8d26\u6237\uff0c\u83b7\u4f60\u7684API KEY\u3002\u514d\u8d39\u7248\u6bcf\u4e2a\u6708\u53ef\u4ee5\u538b\u7f29500\u5f20\u56fe\u7247\uff0c\u5bf9\u4e8e\u4e00\u822c\u9879\u76ee\u800c\u8a00\u5df2\u7ecf\u8db3\u591f\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-tinypng --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar tinypng = require('gulp-tinypng'); \/\/ \u4f7f\u7528TinyPN API\u538b\u7f29\u56fe\u7247\r\n\r\ngulp.task('tinypng', function(){\r\n    return gulp.src('src\/images\/**\/*') \/\/ \u6e90\u5730\u5740\r\n     .pipe(tinypng('\u586b\u5199TinyPN API KEY'))\r\n    .pipe(gulp.dest('dist\/images')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n<\/pre>\n<p>\u6267\u884c\u547d\u4ee4\uff1a<br \/>\n<code>gulp tinypng<\/code><\/p>\n<h4>4.3 \u5176\u4ed6<\/h4>\n<h5>1. \u7f13\u5b58\u4ee3\u7406(<a href=\"https:\/\/www.npmjs.com\/package\/gulp-cache\">gulp-cache<\/a>)\uff1a<\/h5>\n<p>\u7f13\u5b58\u64cd\u4f5c\u8fc7\u7684\u6587\u4ef6\uff0c\u5f53\u6587\u4ef6\u4fee\u6539\u65f6\uff0c\u53ea\u7f16\u8bd1\u5f53\u524d\u4fee\u6539\u7684\u6587\u4ef6\u3002\u5176\u4f59\u6587\u4ef6\u76f4\u63a5\u4ece\u7f13\u5b58\u4e2d\u8c03\u53d6\uff0c\u63d0\u9ad8\u6548\u7387\u3002<br \/>\n\u7f3a\u70b9\uff1a\u56e0\u4e3a\u662f\u7f13\u5b58\uff0c\u6240\u4ee5\u5982\u679c\u6587\u4ef6\u88ab\u5220\u9664\uff0c\u4f46\u6ca1\u53ca\u65f6\u6e05\u7406\u7f13\u5b58\u6587\u4ef6\u65f6\uff0c\u5c31\u4f1a\u5bfc\u81f4\u88ab\u5220\u9664\u7684\u6587\u4ef6\u53c8\u4ece\u7f13\u5b58\u4e2d\u8bfb\u53d6\u4e86\u51fa\u6765\uff0c\u6240\u8c13\u6210\u4e5f\u8427\u4f55\u8d25\u4e5f\u8427\u4f55\u3002<\/p>\n<p>\u5b89\u88c5\u547d\u4ee4\uff1a<br \/>\n<code>npm install gulp-cache --save-dev<\/code><\/p>\n<p>\u57fa\u7840\u914d\u7f6e\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\nvar gulp = require('gulp'); \/\/ \u57fa\u7840\u5e93\r\nvar imagemin = require('gulp-imagemin'), \/\/ \u56fe\u7247\u538b\u7f29\r\n\tpngquant = require('imagemin-pngquant'), \/\/ \u6df1\u5ea6\u538b\u7f29\r\n\tpngquant = require('imagemin-cache'), \/\/ \u7f13\u5b58\u4ee3\u7406\r\n\tclean = require('imagemin-clean'); \/\/ \u6587\u4ef6\u6e05\u7406\r\n\r\n\/\/ imagemin \u56fe\u7247\u538b\u7f29\uff08\u5229\u7528cache\uff09\r\ngulp.task('images', function(){\r\n\treturn gulp.src('src\/images\/**\/*.{png,jpg,gif,svg}') \/\/ \u6307\u660e\u6e90\u6587\u4ef6\u8def\u5f84\u3001\u5e76\u8fdb\u884c\u6587\u4ef6\u5339\u914d\r\n\t\t.pipe(cache(imagemin({\r\n\t\t\tprogressive: true, \/\/ \u65e0\u635f\u538b\u7f29JPG\u56fe\u7247\r\n\t\t\tsvgoPlugins: &#x5B;{removeViewBox: false}], \/\/ \u4e0d\u8981\u79fb\u9664svg\u7684viewbox\u5c5e\u6027\r\n\t\t\tuse: &#x5B;pngquant()] \/\/ \u4f7f\u7528pngquant\u63d2\u4ef6\u8fdb\u884c\u6df1\u5ea6\u538b\u7f29\r\n\t\t})))\r\n\t\t.pipe(gulp.dest('dist\/images')); \/\/ \u8f93\u51fa\u8def\u5f84\r\n});\r\n\/\/ \u6e05\u7406\u7f13\u5b58\u6587\u4ef6\r\ngulp.task('clean', function (done) {\r\n\treturn cache.clearAll(done);\r\n});\r\n<\/pre>\n<h3>5. \u5339\u914d\u89c4\u5219\uff08Match Files\uff09<\/h3>\n<p>Gulp\u4f7f\u7528 <a href=\"https:\/\/github.com\/isaacs\/node-glob\">node-glob<\/a> \u6a21\u5757\uff0c\u501f\u52a9 <a href=\"https:\/\/github.com\/isaacs\/minimatch\">minimatch<\/a> \u5e93\uff0c\u5c06glob\u8868\u8fbe\u5f0f(glob expressions)\u8f6c\u6362\u6210JavaScript\u6b63\u5219\u8868\u8fbe\u5f0f(JavaScript RegExp) \uff0c\u4ece\u800c\u5b9e\u73b0\u6587\u4ef6\u5339\u914d\u529f\u80fd\u3002\u6211\u4eec\u6240\u770b\u5230\u7684<code>**<\/code>\u548c<code>*<\/code>\u90fd\u662f\u5176\u6240\u63d0\u4f9b\u7684\u8bed\u6cd5\uff1a<\/p>\n<p><code>*<\/code> \u5339\u914d\u6587\u4ef6\u8def\u5f84\u4e2d\u76840\u4e2a\u6216\u591a\u4e2a\u5b57\u7b26\uff0c\u4f46\u4e0d\u4f1a\u5339\u914d\u8def\u5f84\u5206\u9694\u7b26\uff0c\u9664\u975e\u8def\u5f84\u5206\u9694\u7b26\u51fa\u73b0\u5728\u672b\u5c3e\u3002<br \/>\n<code>**<\/code> \u5339\u914d\u8def\u5f84\u4e2d\u76840\u4e2a\u6216\u591a\u4e2a\u76ee\u5f55\u53ca\u5176\u5b50\u76ee\u5f55\uff0c\u9700\u8981\u5355\u72ec\u51fa\u73b0\uff0c\u5373\u5b83\u5de6\u53f3\u4e0d\u80fd\u6709\u5176\u4ed6\u4e1c\u897f\u4e86\u3002\u5982\u679c\u51fa\u73b0\u5728\u672b\u5c3e\uff0c\u4e5f\u80fd\u5339\u914d\u6587\u4ef6\u3002<br \/>\n<code>?<\/code> \u5339\u914d\u6587\u4ef6\u8def\u5f84\u4e2d\u7684\u4e00\u4e2a\u5b57\u7b26(\u4e0d\u4f1a\u5339\u914d\u8def\u5f84\u5206\u9694\u7b26)\u3002<br \/>\n<code>[...]<\/code> \u5339\u914d\u65b9\u62ec\u53f7\u4e2d\u51fa\u73b0\u7684\u5b57\u7b26\u4e2d\u7684\u4efb\u610f\u4e00\u4e2a\uff0c\u5f53\u65b9\u62ec\u53f7\u4e2d\u7b2c\u4e00\u4e2a\u5b57\u7b26\u4e3a<code>^<\/code>\u6216<code>!<\/code>\u65f6\uff0c\u5219\u8868\u793a\u4e0d\u5339\u914d\u65b9\u62ec\u53f7\u4e2d\u51fa\u73b0\u7684\u5176\u4ed6\u5b57\u7b26\u4e2d\u7684\u4efb\u610f\u4e00\u4e2a\u3002<br \/>\n<code>!(pattern|pattern|pattern)<\/code> \u5339\u914d\u4efb\u4f55\u4e0e\u62ec\u53f7\u4e2d\u7ed9\u5b9a\u7684\u4efb\u4e00\u53c2\u6570\u4e00\u81f4\u7684\u90fd\u4e0d\u5339\u914d\u7684\u3002<br \/>\n<code>?(pattern|pattern|pattern)<\/code> \u5339\u914d\u62ec\u53f7\u4e2d\u7ed9\u5b9a\u7684\u4efb\u4e00\u53c2\u65700\u6b21\u62161\u6b21\u3002<br \/>\n<code>+(pattern|pattern|pattern)<\/code> \u5339\u914d\u62ec\u53f7\u4e2d\u7ed9\u5b9a\u7684\u4efb\u4e00\u53c2\u6570\u81f3\u5c111\u6b21\u3002<br \/>\n<code>*(a|b|c)<\/code> \u5339\u914d\u62ec\u53f7\u4e2d\u7ed9\u5b9a\u7684\u4efb\u4e00\u53c2\u65700\u6b21\u6216\u591a\u6b21\u3002<br \/>\n<code>@(pattern|pat*|pat?erN)<\/code> \u5339\u914d\u62ec\u53f7\u4e2d\u7ed9\u5b9a\u7684\u4efb\u4e00\u53c2\u65701\u6b21\u3002<\/p>\n<p>\u7528\u5b9e\u4f8b\u6765\u52a0\u6df1\u7406\u89e3\uff1a<br \/>\n<code>*<\/code> \u80fd\u5339\u914d <code>a.js<\/code> , <code>x.y<\/code> , <code>abc , abc\/<\/code>\uff0c\u4f46\u4e0d\u80fd\u5339\u914d a\/b.js<br \/>\n<code>*.*<\/code> \u80fd\u5339\u914d <code>a.js<\/code> , <code>style.css<\/code> , <code>a.b<\/code> , <code>x.y<\/code><br \/>\n<code>*\/*\/*.js<\/code> \u80fd\u5339\u914d <code>a\/b\/c.js<\/code> , <code>x\/y\/z.js<\/code>\uff0c\u4e0d\u80fd\u5339\u914d <code>a\/b.js<\/code> , <code>a\/b\/c\/d.js<\/code><br \/>\n<code>**<\/code> \u80fd\u5339\u914d <code>abc<\/code> , <code>a\/b.js<\/code> , <code>a\/b\/c.js<\/code> , <code>x\/y\/z<\/code> , <code>x\/y\/z\/a.b<\/code>\uff0c\u80fd\u7528\u6765\u5339\u914d\u6240\u6709\u7684\u76ee\u5f55\u548c\u6587\u4ef6<br \/>\n<code>**\/*.js<\/code> \u80fd\u5339\u914d <code>foo.js<\/code> , <code>a\/foo.js<\/code> , <code>a\/b\/foo.js<\/code> , <code>a\/b\/c\/foo.js<\/code><br \/>\n<code>a\/**\/z<\/code> \u80fd\u5339\u914d <code>a\/z<\/code> , <code>a\/b\/z<\/code> , <code>a\/b\/c\/z<\/code> , <code>a\/d\/g\/h\/j\/k\/z<\/code><br \/>\n<code>a\/**b\/z<\/code> \u80fd\u5339\u914d <code>a\/b\/z , a\/sb\/z<\/code>\uff0c\u4f46\u4e0d\u80fd\u5339\u914d <code>a\/x\/sb\/z<\/code>\uff0c\u56e0\u4e3a\u53ea\u6709\u5355<code>**<\/code>\u5355\u72ec\u51fa\u73b0\u624d\u80fd\u5339\u914d\u591a\u7ea7\u76ee\u5f55<br \/>\n<code>?.js<\/code> \u80fd\u5339\u914d <code>a.js<\/code> , <code>b.js<\/code> , <code>c.js<\/code><br \/>\n<code>a??<\/code> \u80fd\u5339\u914d <code>a.b<\/code> , <code>abc<\/code>\uff0c\u4f46\u4e0d\u80fd\u5339\u914d <code>ab\/<\/code>\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u5339\u914d\u8def\u5f84\u5206\u9694\u7b26<br \/>\n<code>[xyz].js<\/code> \u53ea\u80fd\u5339\u914d <code>x.js<\/code> , <code>y.js<\/code> , <code>z.js<\/code>\uff0c\u4e0d\u4f1a\u5339\u914d <code>xy.js<\/code> , <code>xyz.js<\/code> \u7b49\uff0c\u6574\u4e2a\u4e2d\u62ec\u53f7\u53ea\u4ee3\u8868\u4e00\u4e2a\u5b57\u7b26<br \/>\n<code>[^xyz].js<\/code> \u80fd\u5339\u914d <code>a.js<\/code> , <code>b.js<\/code> , <code>c.js<\/code>\u7b49\uff0c\u4e0d\u80fd\u5339\u914d <code>x.js<\/code> , <code>y.js<\/code> , <code>z.js<\/code><\/p>\n<p>\u5f53\u6709\u591a\u79cd\u5339\u914d\u6a21\u5f0f\u65f6\u53ef\u4ee5\u4f7f\u7528\u6570\u7ec4\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ \u4f7f\u7528\u6570\u7ec4\u7684\u65b9\u5f0f\u6765\u5339\u914d\u591a\u79cd\u6587\u4ef6\r\ngulp.src(&#x5B;'js\/*.min.js','css\/*.min.css'])\r\n<\/pre>\n<p>\u4f7f\u7528\u6570\u7ec4\u7684\u65b9\u5f0f\u8fd8\u6709\u4e00\u4e2a\u597d\u5904\u5c31\u662f\u53ef\u4ee5\u5f88\u65b9\u4fbf\u7684\u4f7f\u7528\u6392\u9664\u6a21\u5f0f\uff0c\u5728\u6570\u7ec4\u4e2d\u7684\u5355\u4e2a\u5339\u914d\u6a21\u5f0f\u524d\u52a0\u4e0a<code>!<\/code>\u5373\u662f\u6392\u9664\u6a21\u5f0f\uff0c\u5b83\u4f1a\u5728\u5339\u914d\u7684\u7ed3\u679c\u4e2d\u6392\u9664\u8fd9\u4e2a\u5339\u914d\uff0c\u8981\u6ce8\u610f\u4e00\u70b9\u7684\u662f\u4e0d\u80fd\u5728\u6570\u7ec4\u4e2d\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u4e2d\u4f7f\u7528\u6392\u9664\u6a21\u5f0f\uff1a<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n\/\/ \u4f7f\u7528\u6570\u7ec4\u7684\u65b9\u5f0f\u6765\u5339\u914d\u591a\u79cd\u6587\u4ef6\r\ngulp.src(&#x5B;'*.js','!b*.js']) \/\/ \u5339\u914d\u6240\u6709js\u6587\u4ef6\uff0c\u4f46\u6392\u9664\u6389\u4ee5b\u5f00\u5934\u7684js\u6587\u4ef6\r\ngulp.src(&#x5B;'!b*.js',*.js]) \/\/ \u4e0d\u4f1a\u6392\u9664\u4efb\u4f55\u6587\u4ef6\uff0c\u56e0\u4e3a\u6392\u9664\u6a21\u5f0f\u4e0d\u80fd\u51fa\u73b0\u5728\u6570\u7ec4\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\u4e2d\r\n<\/pre>\n<p>\u6b64\u5916\uff0c\u8fd8\u53ef\u4ee5\u4f7f\u7528\u5c55\u5f00\u6a21\u5f0f\u3002\u5c55\u5f00\u6a21\u5f0f\u4ee5\u82b1\u62ec\u53f7\u4f5c\u4e3a\u5b9a\u754c\u7b26\uff0c\u6839\u636e\u5b83\u91cc\u9762\u7684\u5185\u5bb9\uff0c\u4f1a\u5c55\u5f00\u4e3a\u591a\u4e2a\u6a21\u5f0f\uff0c\u6700\u540e\u5339\u914d\u7684\u7ed3\u679c\u4e3a\u6240\u6709\u5c55\u5f00\u7684\u6a21\u5f0f\u76f8\u52a0\u8d77\u6765\u5f97\u5230\u7684\u7ed3\u679c\u3002\u5c55\u5f00\u7684\u4f8b\u5b50\u5982\u4e0b\uff1a<br \/>\n<code>a{b,c}d<\/code> \u4f1a\u5c55\u5f00\u4e3a <code>abd,acd<\/code><br \/>\n<code>a{b,}c<\/code> \u4f1a\u5c55\u5f00\u4e3a <code>abc,ac<\/code><br \/>\n<code>a{0..3}d<\/code> \u4f1a\u5c55\u5f00\u4e3a <code>a0d<\/code>,<code>a1d<\/code>,<code>a2d<\/code>,<code>a3d<\/code><br \/>\n<code>a{b,c{d,e}f}g<\/code> \u4f1a\u5c55\u5f00\u4e3a <code>abg<\/code>,<code>acdfg<\/code>,<code>acefg<\/code><br \/>\n<code>a{b,c}d{e,f}g<\/code> \u4f1a\u5c55\u5f00\u4e3a <code>abdeg<\/code>,<code>acdeg<\/code>,<code>abdeg<\/code>,<code>abdfg<\/code><\/p>\n<h3>6. \u6ce8\u610f\u4e8b\u9879\uff08Attention\uff09<\/h3>\n<ul>\n<li>watch \u7684\u65f6\u5019\u8def\u5f84\u4e0d\u8981\u7528 '.\/path'\uff0c\u76f4\u63a5\u4f7f\u7528 '\/path' \u5373\u53ef\u4e0d\u7136\u4f1a\u5bfc\u81f4\u65b0\u589e\u6587\u4ef6\u65e0\u6cd5\u88ab watch\u3002<\/li>\n<li>gulp \u5bf9\u4e8e one after one \u7684\u4efb\u52a1\u94fe\uff0c\u9700\u8981\u52a0 return\uff0c\u6bd4\u5982 gulp clean<\/li>\n<\/ul>\n<p>\u5b8c\u6574\u4ee3\u7801\uff0c\u8bf7\u67e5\u770bGithub\uff1a<a class=\"dlBtn\" title=\"Github\" href=\"https:\/\/github.com\/zhonglimh\/Gulp\" target=\"_blank\">Github<\/a><\/p>\n<p>\u53c2\u8003\u8d44\u6599\uff1a<br \/>\n<a href=\"http:\/\/www.codeproject.com\/Articles\/865943\/An-introduction-to-Gulp\">An introduction to Gulp<\/a><br \/>\n<a href=\"http:\/\/www.cnblogs.com\/2050\/p\/4198792.html#part3\">gulp API \u4ecb\u7ecd<\/a><\/p>\n<p>\u6269\u5c55\u8d44\u6599\uff1a<br \/>\n<a href=\"https:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md\">Gulp API docs<\/a><br \/>\n<a href=\"https:\/\/github.com\/osscafe\/gulp-cheatsheet\">gulp-cheatsheet<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5728\u5bf9Gulp\u6709\u4e86\u4e00\u4e2a\u521d\u6b65\u7684\u4e86\u89e3\u4e4b\u540e\uff0c\u6211\u4eec\u5f00\u59cb\u6784\u5efa\u4e00\u4e2a\u8f83\u4e3a\u5b8c\u6574\u7684Gulp\u5f00\u53d1\u73af\u5883\u3002 \u672c\u6587\u4e3b\u8981\u5206\u4e3a6\u4e2a\u6bb5\u843d\uff1a 1&#46; \u6784\u5efa\u9879\u76ee\u76ee\u5f55\u7ed3\u6784\uff08Directory Structure Build\uff09 2&#46; \u63d2\u4ef6\u4ecb\u7ecd\u53ca\u4f7f\u7528\u65b9\u6cd5\uff08Tasks and dependencies\uff09 3&#46; \u6269\u5c55\u4f18\u5316\uff08Extend &amp; Optimize Task\uff09 4&#46; \u5176\u4ed6\u63d2\u4ef6\u4ecb\u7ecd\uff08Other plug-ins\uff09 5&#46; \u5339\u914d\u89c4\u5219\uff08Match Files\uff09 6&#46; \u6ce8\u610f\u4e8b\u9879\uff08Attention\uff09 \u5173\u4e8eGulp\u7684\u5165\u95e8\u4ecb\u7ecd\u53ca\u5b89\u88c5\u65b9\u6cd5\uff0c\u53ef\u5148\u53bb\u300aGulp\u6784\u5efa\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u4f5c\u6d41\u4e4b\uff1a\u5165\u95e8\u4ecb\u7ecd\u53caLiveReload\u7684\u4f7f\u7528\u300b \u8fd9\u7bc7\u6587\u7ae0\u67e5\u770b\u3002\u5bf9\u5176\u6709\u4e2a\u521d\u6b65\u8ba4\u8bc6\u540e\uff0c\u4fbf\u4e8e\u540e\u6587\u7684\u7406\u89e3\u3002<\/p>\n","protected":false},"author":1,"featured_media":783,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[75],"tags":[129,130,135,131],"class_list":["post-782","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-front-end","tag-gulp","tag-gulp-plugins","tag-nodejs","tag-fontend-automation"],"_links":{"self":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/782"}],"collection":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/comments?post=782"}],"version-history":[{"count":0,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/posts\/782\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media\/783"}],"wp:attachment":[{"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/media?parent=782"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/categories?post=782"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bluesdream.com\/blog\/wp-json\/wp\/v2\/tags?post=782"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}