{"id":2039,"date":"2016-11-06T15:58:55","date_gmt":"2016-11-06T07:58:55","guid":{"rendered":"http:\/\/www.daliane.com\/?p=2039"},"modified":"2016-11-06T15:59:23","modified_gmt":"2016-11-06T07:59:23","slug":"30_fen_zhong_xue_hui_shi_yong_gulp","status":"publish","type":"post","link":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/30_fen_zhong_xue_hui_shi_yong_gulp\/","title":{"rendered":"30\u5206\u949f\u5b66\u4f1a\u4f7f\u7528gulp"},"content":{"rendered":"
\n
\n

gulp\u8be6\u7ec6\u5165\u95e8\u6559\u7a0b<\/h2>\n

\n<\/header>\n

\n

\u7b80\u4ecb\uff1a<\/h3>\n

gulp\u662f\u524d\u7aef\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u5bf9\u4ee3\u7801\u8fdb\u884c\u6784\u5efa\u7684\u5de5\u5177\uff0c\u662f\u81ea\u52a8\u5316\u9879\u76ee\u7684\u6784\u5efa\u5229\u5668\uff1b\u5979\u4e0d\u4ec5\u80fd\u5bf9\u7f51\u7ad9\u8d44\u6e90\u8fdb\u884c\u4f18\u5316\uff0c\u800c\u4e14\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u5f88\u591a\u91cd\u590d\u7684\u4efb\u52a1\u80fd\u591f\u4f7f\u7528\u6b63\u786e\u7684\u5de5\u5177\u81ea\u52a8\u5b8c\u6210\uff1b\u4f7f\u7528\u5979\uff0c\u6211\u4eec\u4e0d\u4ec5\u53ef\u4ee5\u5f88\u6109\u5feb\u7684\u7f16\u5199\u4ee3\u7801\uff0c\u800c\u4e14\u5927\u5927\u63d0\u9ad8\u6211\u4eec\u7684\u5de5\u4f5c\u6548\u7387\u3002<\/p>\n<\/div>\n

\n

gulp\u662f\u57fa\u4e8eNodejs\u7684\u81ea\u52a8\u4efb\u52a1\u8fd0\u884c\u5668\uff0c \u5979\u80fd\u81ea\u52a8\u5316\u5730\u5b8c\u6210 javascript\/coffee\/sass\/less\/html\/image\/css \u7b49\u6587\u4ef6\u7684\u7684\u6d4b\u8bd5\u3001\u68c0\u67e5\u3001\u5408\u5e76\u3001\u538b\u7f29\u3001\u683c\u5f0f\u5316\u3001\u6d4f\u89c8\u5668\u81ea\u52a8\u5237\u65b0\u3001\u90e8\u7f72\u6587\u4ef6\u751f\u6210\uff0c\u5e76\u76d1\u542c\u6587\u4ef6\u5728\u6539\u52a8\u540e\u91cd\u590d\u6307\u5b9a\u7684\u8fd9\u4e9b\u6b65\u9aa4\u3002\u5728\u5b9e\u73b0\u4e0a\uff0c\u5979\u501f\u9274\u4e86Unix\u64cd\u4f5c\u7cfb\u7edf\u7684\u7ba1\u9053\uff08pipe\uff09\u601d\u60f3\uff0c\u524d\u4e00\u7ea7\u7684\u8f93\u51fa\uff0c\u76f4\u63a5\u53d8\u6210\u540e\u4e00\u7ea7\u7684\u8f93\u5165\uff0c\u4f7f\u5f97\u5728\u64cd\u4f5c\u4e0a\u975e\u5e38\u7b80\u5355\u3002\u901a\u8fc7\u672c\u6587\uff0c\u6211\u4eec\u5c06\u5b66\u4e60\u5982\u4f55\u4f7f\u7528Gulp\u6765\u6539\u53d8\u5f00\u53d1\u6d41\u7a0b\uff0c\u4ece\u800c\u4f7f\u5f00\u53d1\u66f4\u52a0\u5feb\u901f\u9ad8\u6548\u3002<\/p>\n

gulp \u548c grunt \u975e\u5e38\u7c7b\u4f3c\uff0c\u4f46\u76f8\u6bd4\u4e8e grunt \u7684\u9891\u7e41 IO \u64cd\u4f5c\uff0cgulp \u7684\u6d41\u64cd\u4f5c\uff0c\u80fd\u66f4\u5feb\u5730\u66f4\u4fbf\u6377\u5730\u5b8c\u6210\u6784\u5efa\u5de5\u4f5c\u3002<\/p>\n

\u672c\u793a\u4f8b\u4ee5gulp-less\u4e3a\u4f8b\uff08\u5c06less\u7f16\u8bd1\u6210css\u7684gulp\u63d2\u4ef6\uff09\u5c55\u793agulp\u7684\u5e38\u89c4\u7528\u6cd5\uff0c\u53ea\u8981\u6211\u4eec\u5b66\u4f1a\u4f7f\u7528\u4e00\u4e2agulp\u63d2\u4ef6\u540e\uff0c\u5176\u4ed6\u63d2\u4ef6\u5c31\u5dee\u770b\u770b\u5176\u5e2e\u52a9\u6587\u6863\u4e86\u3002\u8ba9\u6211\u4eec\u4e00\u8d77\u6765\u5b66\u4e60gulp\u5427\uff01 ^_^<\/p>\n

gulp\u5e38\u7528\u5730\u5740\uff1a<\/p>\n

gulp\u5b98\u65b9\u7f51\u5740\uff1ahttp:\/\/gulpjs.com<\/a><\/p>\n

gulp\u63d2\u4ef6\u5730\u5740\uff1ahttp:\/\/gulpjs.com\/plugins<\/a><\/p>\n

gulp \u5b98\u65b9API\uff1ahttps:\/\/github.com\/gulpjs\/gulp\/blob\/master\/docs\/API.md<\/a><\/p>\n

gulp \u4e2d\u6587API\uff1ahttp:\/\/www.ydcss.com\/archives\/424<\/a><\/p>\n

\u76ee\u5f55\uff1a<\/p>\n

\n
1\u3001\u5b89\u88c5nodejs<\/a><\/div>\n
2\u3001\u4f7f\u7528\u547d\u4ee4\u884c<\/a><\/div>\n
3\u3001npm\u4ecb\u7ecd<\/a><\/div>\n
4\u3001\u9009\u88c5cnpm<\/a><\/div>\n
5\u3001\u5168\u5c40\u5b89\u88c5gulp<\/a><\/div>\n
6\u3001\u65b0\u5efapackage.json\u6587\u4ef6<\/a><\/div>\n
7\u3001\u672c\u5730\u5b89\u88c5gulp\u63d2\u4ef6<\/a><\/div>\n
8\u3001\u65b0\u5efagulpfile.js\u6587\u4ef6<\/a><\/div>\n
9\u3001\u8fd0\u884cgulp<\/a><\/div>\n
10\u3001\u4f7f\u7528webstorm\u8fd0\u884cgulp\u4efb\u52a1<\/a><\/div>\n
11\u3001\u603b\u7ed3<\/a><\/div>\n<\/div>\n

\u5728\u5b66\u4e60\u524d\uff0c\u5148\u8c08\u8c08\u5927\u81f4\u4f7f\u7528gulp\u7684\u6b65\u9aa4\uff0c\u7ed9\u8bfb\u8005\u4ee5\u521d\u6b65\u7684\u8ba4\u8bc6\u3002\u9996\u5148\u5f53\u7136\u662f\u5b89\u88c5nodejs\uff0c\u901a\u8fc7nodejs\u7684npm\u5168\u5c40\u5b89\u88c5\u548c\u9879\u76ee\u5b89\u88c5gulp\uff0c\u5176\u6b21\u5728\u9879\u76ee\u91cc\u5b89\u88c5\u6240\u9700\u8981\u7684gulp\u63d2\u4ef6\uff0c\u7136\u540e\u65b0\u5efagulp\u7684\u914d\u7f6e\u6587\u4ef6gulpfile.js\u5e76\u5199\u597d\u914d\u7f6e\u4fe1\u606f\uff08\u5b9a\u4e49gulp\u4efb\u52a1\uff09\uff0c\u6700\u540e\u901a\u8fc7\u547d\u4ee4\u63d0\u793a\u7b26\u8fd0\u884cgulp\u4efb\u52a1\u5373\u53ef\u3002<\/p>\n

\u5b89\u88c5nodejs -> \u5168\u5c40\u5b89\u88c5gulp -> \u9879\u76ee\u5b89\u88c5gulp\u4ee5\u53cagulp\u63d2\u4ef6 -> \u914d\u7f6egulpfile.js -> \u8fd0\u884c\u4efb\u52a1<\/p>\n

1\u3001\u5b89\u88c5nodejs<\/h3>\n

1.1\u3001\u8bf4\u660e\uff1agulp\u662f\u57fa\u4e8enodejs\uff0c\u7406\u6240\u5f53\u7136\u9700\u8981\u5b89\u88c5nodejs\uff1b<\/p>\n

1.2\u3001\u5b89\u88c5\uff1a\u6253\u5f00nodejs\u5b98\u7f51<\/a>\uff0c\u70b9\u51fb\u7855\u5927\u7684\u7eff\u8272Download\u6309\u94ae\uff0c\u5b83\u4f1a\u6839\u636e\u7cfb\u7edf\u4fe1\u606f\u9009\u62e9\u5bf9\u5e94\u7248\u672c\uff08.msi\u6587\u4ef6\uff09\u3002\u7136\u540e\u50cf\u5b89\u88c5QQ\u4e00\u6837\u5b89\u88c5\u5b83\u5c31\u53ef\u4ee5\u4e86\uff08\u5b89\u88c5\u8def\u5f84\u968f\u610f\uff09\u3002<\/p>\n

2\u3001\u4f7f\u7528\u547d\u4ee4\u884c\uff08\u5982\u679c\u4f60\u719f\u6089\u547d\u4ee4\u884c\uff0c\u53ef\u4ee5\u76f4\u63a5\u8df3\u5230\u7b2c3\u6b65<\/a>\uff09<\/h3>\n

2.1\u3001\u8bf4\u660e\uff1a\u4ec0\u4e48\u662f\u547d\u4ee4\u884c\uff1f\u547d\u4ee4\u884c\u5728OSX\u662f\u7ec8\u7aef\uff08Terminal\uff09\uff0c\u5728windows\u662f\u547d\u4ee4\u63d0\u793a\u7b26\uff08Command Prompt\uff09\uff1b<\/p>\n

2.2\u3001\u6ce8\uff1a\u4e4b\u540e\u64cd\u4f5c\u90fd\u662f\u5728windows\u7cfb\u7edf\u4e0b\uff1b<\/p>\n

2.3\u3001\u7b80\u5355\u4ecb\u7ecdgulp\u5728\u4f7f\u7528\u8fc7\u7a0b\u4e2d\u5e38\u7528\u547d\u4ee4\uff0c\u6253\u5f00\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884c\u4e0b\u5217\u547d\u4ee4\uff08\u6253\u5f00\u65b9\u5f0f\uff1awindow\u00a0+ r \u8f93\u5165cmd\u56de\u8f66\uff09\uff1a<\/p>\n

node -v<\/strong>\u67e5\u770b\u5b89\u88c5\u7684nodejs\u7248\u672c\uff0c\u51fa\u73b0\u7248\u672c\u53f7\uff0c\u8bf4\u660e\u521a\u521a\u5df2\u6b63\u786e\u5b89\u88c5nodejs\u3002PS\uff1a\u672a\u80fd\u51fa\u73b0\u7248\u672c\u53f7\uff0c\u8bf7\u5c1d\u8bd5\u6ce8\u9500\u7535\u8111\u91cd\u8bd5\uff1b<\/p>\n

npm -v<\/strong>\u67e5\u770bnpm\u7684\u7248\u672c\u53f7\uff0cnpm\u662f\u5728\u5b89\u88c5nodejs\u65f6\u4e00\u540c\u5b89\u88c5\u7684nodejs\u5305\u7ba1\u7406\u5668\uff0c\u90a3\u5b83\u6709\u4ec0\u4e48\u7528\u5462\uff1f\u7a0d\u540e\u89e3\u91ca<\/a>\uff1b<\/p>\n

cd<\/strong>\u5b9a\u4f4d\u5230\u76ee\u5f55\uff0c\u7528\u6cd5\uff1acd + \u8def\u5f84 \uff1b<\/p>\n

dir<\/strong>\u5217\u51fa\u6587\u4ef6\u5217\u8868\uff1b<\/p>\n

cls<\/strong>\u6e05\u7a7a\u547d\u4ee4\u63d0\u793a\u7b26\u7a97\u53e3\u5185\u5bb9\u3002<\/p>\n

\"\"<\/p>\n

3\u3001npm\u4ecb\u7ecd<\/h3>\n

3.1\u3001\u8bf4\u660e\uff1anpm\uff08node package manager\uff09nodejs\u7684\u5305\u7ba1\u7406\u5668\uff0c\u7528\u4e8enode\u63d2\u4ef6\u7ba1\u7406\uff08\u5305\u62ec\u5b89\u88c5\u3001\u5378\u8f7d\u3001\u7ba1\u7406\u4f9d\u8d56\u7b49\uff09\uff1b<\/p>\n

3.2\u3001\u4f7f\u7528npm\u5b89\u88c5\u63d2\u4ef6\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cnpm install <name> [-g] [--save-dev]<\/code><\/strong>\uff1b<\/p>\n

3.2.1\u3001<name><\/strong>\uff1anode\u63d2\u4ef6\u540d\u79f0\u3002\u4f8b\uff1anpm install gulp-less --save-dev<\/code><\/strong><\/p>\n

3.2.2\u3001-g<\/strong>\uff1a\u5168\u5c40\u5b89\u88c5\u3002\u5c06\u4f1a\u5b89\u88c5\u5728C:UsersAdministratorAppDataRoamingnpm<\/code>\uff0c\u5e76\u4e14\u5199\u5165\u7cfb\u7edf\u73af\u5883\u53d8\u91cf\uff1b \u00a0\u975e\u5168\u5c40\u5b89\u88c5\uff1a\u5c06\u4f1a\u5b89\u88c5\u5728\u5f53\u524d\u5b9a\u4f4d\u76ee\u5f55\uff1b \u00a0\u5168\u5c40\u5b89\u88c5\u53ef\u4ee5\u901a\u8fc7\u547d\u4ee4\u884c\u5728\u4efb\u4f55\u5730\u65b9\u8c03\u7528\u5b83\uff0c\u672c\u5730\u5b89\u88c5\u5c06\u5b89\u88c5\u5728\u5b9a\u4f4d\u76ee\u5f55\u7684node_modules\u6587\u4ef6\u5939\u4e0b\uff0c\u901a\u8fc7require()\u8c03\u7528\uff1b<\/p>\n

3.2.3\u3001--save<\/code><\/strong>\uff1a\u5c06\u4fdd\u5b58\u914d\u7f6e\u4fe1\u606f\u81f3package.json\uff08package.json\u662fnodejs\u9879\u76ee\u914d\u7f6e\u6587\u4ef6<\/a>\uff09\uff1b<\/p>\n

3.2.4\u3001-dev<\/strong>\uff1a\u4fdd\u5b58\u81f3package.json\u7684devDependencies\u8282\u70b9\uff0c\u4e0d\u6307\u5b9a-dev\u5c06\u4fdd\u5b58\u81f3dependencies\u8282\u70b9\uff1b\u4e00\u822c\u4fdd\u5b58\u5728dependencies\u7684\u50cf\u8fd9\u4e9bexpress\/ejs\/body-parser\u7b49\u7b49\u3002<\/p>\n

3.2.5\u3001\u4e3a\u4ec0\u4e48\u8981\u4fdd\u5b58\u81f3package.json\uff1f\u56e0\u4e3anode\u63d2\u4ef6\u5305\u76f8\u5bf9\u6765\u8bf4\u975e\u5e38\u5e9e\u5927\uff0c\u6240\u4ee5\u4e0d\u52a0\u5165\u7248\u672c\u7ba1\u7406\uff0c\u5c06\u914d\u7f6e\u4fe1\u606f\u5199\u5165package.json\u5e76\u5c06\u5176\u52a0\u5165\u7248\u672c\u7ba1\u7406\uff0c\u5176\u4ed6\u5f00\u53d1\u8005\u5bf9\u5e94\u4e0b\u8f7d\u5373\u53ef\uff08\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cnpm install<\/strong>\uff0c\u5219\u4f1a\u6839\u636epackage.json\u4e0b\u8f7d\u6240\u6709\u9700\u8981\u7684\u5305\uff0cnpm install --production<\/strong><\/code>\u53ea\u4e0b\u8f7ddependencies\u8282\u70b9\u7684\u5305\uff09\u3002<\/p>\n

3.3\u3001\u4f7f\u7528npm\u5378\u8f7d\u63d2\u4ef6\uff1anpm uninstall <name> [-g] [--save-dev]<\/code><\/strong> \u00a0PS\uff1a\u4e0d\u8981\u76f4\u63a5\u5220\u9664\u672c\u5730\u63d2\u4ef6\u5305<\/p>\n

3.3.1\u3001\u5220\u9664\u5168\u90e8\u63d2\u4ef6\uff1anpm uninstall gulp-less gulp-uglify gulp-concat \u2026\u2026<\/strong>???\u592a\u9ebb\u70e6<\/p>\n

3.3.2\u3001\u501f\u52a9rimraf\uff1anpm install rimraf -g<\/strong> \u7528\u6cd5\uff1arimraf node_modules<\/strong><\/p>\n

3.4\u3001\u4f7f\u7528npm\u66f4\u65b0\u63d2\u4ef6\uff1anpm update <name> [-g] [--save-dev]<\/code><\/strong><\/p>\n

3.4.1\u3001\u66f4\u65b0\u5168\u90e8\u63d2\u4ef6\uff1anpm update [--save-dev]<\/code><\/strong><\/p>\n

3.5\u3001\u67e5\u770bnpm\u5e2e\u52a9\uff1anpm help<\/strong><\/p>\n

3.6\u3001\u5f53\u524d\u76ee\u5f55\u5df2\u5b89\u88c5\u63d2\u4ef6\uff1anpm list<\/strong><\/p>\n

PS\uff1anpm\u5b89\u88c5\u63d2\u4ef6\u8fc7\u7a0b\uff1a\u4ecehttp:\/\/registry.npmjs.org\u4e0b\u8f7d\u5bf9\u5e94\u7684\u63d2\u4ef6\u5305\uff08\u8be5\u7f51\u7ad9\u670d\u52a1\u5668\u4f4d\u4e8e\u56fd\u5916\uff0c\u6240\u4ee5\u7ecf\u5e38\u4e0b\u8f7d\u7f13\u6162\u6216\u51fa\u73b0\u5f02\u5e38\uff09\uff0c\u89e3\u51b3\u529e\u6cd5\u5f80\u4e0b\u770b\u2193\u2193\u2193\u2193\u2193\u2193\u3002<\/p>\n

4\u3001\u9009\u88c5cnpm<\/h3>\n

4.1\u3001\u8bf4\u660e\uff1a\u56e0\u4e3anpm\u5b89\u88c5\u63d2\u4ef6\u662f\u4ece\u56fd\u5916\u670d\u52a1\u5668\u4e0b\u8f7d\uff0c\u53d7\u7f51\u7edc\u5f71\u54cd\u5927\uff0c\u53ef\u80fd\u51fa\u73b0\u5f02\u5e38\uff0c\u5982\u679cnpm\u7684\u670d\u52a1\u5668\u5728\u4e2d\u56fd\u5c31\u597d\u4e86\uff0c\u6240\u4ee5\u6211\u4eec\u4e50\u4e8e\u5206\u4eab\u7684\u6dd8\u5b9d\u56e2\u961f\u5e72\u4e86\u8fd9\u4e8b\u300232\u4e2a\ue604<\/i><\/span>\uff01\u6765\u81ea\u5b98\u7f51\uff1a\u201c\u8fd9\u662f\u4e00\u4e2a\u5b8c\u6574 npmjs.org \u955c\u50cf\uff0c\u4f60\u53ef\u4ee5\u7528\u6b64\u4ee3\u66ff\u5b98\u65b9\u7248\u672c(\u53ea\u8bfb)\uff0c\u540c\u6b65\u9891\u7387\u76ee\u524d\u4e3a 10\u5206\u949f \u4e00\u6b21\u4ee5\u4fdd\u8bc1\u5c3d\u91cf\u4e0e\u5b98\u65b9\u670d\u52a1\u540c\u6b65\u3002\u201d<\/strong>\uff1b<\/p>\n

4.2\u3001\u5b98\u65b9\u7f51\u5740\uff1ahttp:\/\/npm.taobao.org<\/a>\uff1b<\/p>\n

4.3\u3001\u5b89\u88c5\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cnpm install cnpm -g --registry=https:\/\/registry.npm.taobao.org<\/code><\/strong>\uff1b \u00a0\u6ce8\u610f\uff1a\u5b89\u88c5\u5b8c\u540e\u6700\u597d\u67e5\u770b\u5176\u7248\u672c\u53f7cnpm -v<\/strong>\u6216\u5173\u95ed\u547d\u4ee4\u63d0\u793a\u7b26\u91cd\u65b0\u6253\u5f00\uff0c\u5b89\u88c5\u5b8c\u76f4\u63a5\u4f7f\u7528\u6709\u53ef\u80fd\u4f1a\u51fa\u73b0\u9519\u8bef\uff1b<\/p>\n

\u6ce8\uff1acnpm\u8ddfnpm\u7528\u6cd5\u5b8c\u5168\u4e00\u81f4\uff0c\u53ea\u662f\u5728\u6267\u884c\u547d\u4ee4\u65f6\u5c06npm\u6539\u4e3acnpm\uff08\u4ee5\u4e0b\u64cd\u4f5c\u5c06\u4ee5cnpm\u4ee3\u66ffnpm\uff09\u3002<\/p>\n

5\u3001\u5168\u5c40\u5b89\u88c5gulp<\/h3>\n

5.1\u3001\u8bf4\u660e\uff1a\u5168\u5c40\u5b89\u88c5gulp\u76ee\u7684\u662f\u4e3a\u4e86\u901a\u8fc7\u5979\u6267\u884cgulp\u4efb\u52a1\uff1b<\/p>\n

5.2\u3001\u5b89\u88c5\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884ccnpm install gulp -g<\/strong>\uff1b<\/p>\n

5.3\u3001\u67e5\u770b\u662f\u5426\u6b63\u786e\u5b89\u88c5\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cgulp -v<\/strong>\uff0c\u51fa\u73b0\u7248\u672c\u53f7\u5373\u4e3a\u6b63\u786e\u5b89\u88c5\u3002<\/p>\n

6\u3001\u65b0\u5efapackage.json\u6587\u4ef6<\/h3>\n

6.1\u3001\u8bf4\u660e\uff1apackage.json\u662f\u57fa\u4e8enodejs\u9879\u76ee\u5fc5\u4e0d\u53ef\u5c11\u7684\u914d\u7f6e\u6587\u4ef6\uff0c\u5b83\u662f\u5b58\u653e\u5728\u9879\u76ee\u6839\u76ee\u5f55\u7684\u666e\u901ajson\u6587\u4ef6\uff1b<\/p>\n

6.2\u3001\u5b83\u662f\u8fd9\u6837\u4e00\u4e2ajson\u6587\u4ef6\uff08\u6ce8\u610f\uff1ajson\u6587\u4ef6\u5185\u662f\u4e0d\u80fd\u5199\u6ce8\u91ca\u7684\uff0c\u590d\u5236\u4e0b\u5217\u5185\u5bb9\u8bf7\u5220\u9664\u6ce8\u91ca\uff09<\/strong>\uff1a<\/p>\n

\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n

JavaScript<\/span><\/p>\n<\/div>\n<\/div>\n

<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n
17<\/div>\n
18<\/div>\n
19<\/div>\n<\/div>\n<\/td>\n
\n
\n
{<\/span><\/div>\n
\u00a0\u00a0<\/span>“name”<\/span>:<\/span> “test”<\/span>,<\/span>\u00a0\u00a0 <\/span>\/\/\u9879\u76ee\u540d\u79f0\uff08\u5fc5\u987b\uff09<\/span><\/div>\n
\u00a0\u00a0<\/span>“version”<\/span>:<\/span> “1.0.0”<\/span>,<\/span>\u00a0\u00a0 <\/span>\/\/\u9879\u76ee\u7248\u672c\uff08\u5fc5\u987b\uff09<\/span><\/div>\n
\u00a0\u00a0<\/span>“description”<\/span>:<\/span> “This is for study gulp project !”<\/span>,<\/span>\u00a0\u00a0 <\/span>\/\/\u9879\u76ee\u63cf\u8ff0\uff08\u5fc5\u987b\uff09<\/span><\/div>\n
\u00a0\u00a0<\/span>“homepage”<\/span>:<\/span> “”<\/span>,<\/span>\u00a0\u00a0 <\/span>\/\/\u9879\u76ee\u4e3b\u9875<\/span><\/div>\n
\u00a0\u00a0<\/span>“repository”<\/span>:<\/span> {<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>\/\/\u9879\u76ee\u8d44\u6e90\u5e93<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“type”<\/span>:<\/span> “git”<\/span>,<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“url”<\/span>:<\/span> “https:\/\/git.oschina.net\/xxxx”<\/span><\/div>\n
\u00a0\u00a0<\/span>}<\/span>,<\/span><\/div>\n
\u00a0\u00a0<\/span>“author”<\/span>:<\/span> {<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>\/\/\u9879\u76ee\u4f5c\u8005\u4fe1\u606f<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“name”<\/span>:<\/span> “surging”<\/span>,<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“email”<\/span>:<\/span> “surging2@qq.com”<\/span><\/div>\n
\u00a0\u00a0<\/span>}<\/span>,<\/span><\/div>\n
\u00a0\u00a0<\/span>“license”<\/span>:<\/span> “ISC”<\/span>,<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>\/\/\u9879\u76ee\u8bb8\u53ef\u534f\u8bae<\/span><\/div>\n
\u00a0\u00a0<\/span>“devDependencies”<\/span>:<\/span> {<\/span>\u00a0\u00a0\u00a0\u00a0<\/span>\/\/\u9879\u76ee\u4f9d\u8d56\u7684\u63d2\u4ef6<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“gulp”<\/span>:<\/span> “^3.8.11”<\/span>,<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>“gulp-less”<\/span>:<\/span> “^3.0.0”<\/span><\/div>\n
\u00a0\u00a0<\/span>}<\/span><\/div>\n
}<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

6.3\u3001\u5f53\u7136\u6211\u4eec\u53ef\u4ee5\u624b\u52a8\u65b0\u5efa\u8fd9\u4e2a\u914d\u7f6e\u6587\u4ef6\uff0c\u4f46\u662f\u4f5c\u4e3a\u4e00\u540d\u6709\u5fd7\u9752\u5e74\uff0c\u6211\u4eec\u5e94\u8be5\u4f7f\u7528\u66f4\u4e3a\u6548\u7387\u7684\u65b9\u6cd5\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884ccnpm init<\/strong><\/p>\n

\"\"<\/p>\n

6.4\u3001\u67e5\u770bpackage.json\u5e2e\u52a9\u6587\u6863\uff0c\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884ccnpm help package.json<\/strong><\/p>\n

\u7279\u522b\u6ce8\u610f\uff1apackage.json\u662f\u4e00\u4e2a\u666e\u901ajson\u6587\u4ef6\uff0c\u6240\u4ee5\u4e0d\u80fd\u6dfb\u52a0\u4efb\u4f55\u6ce8\u91ca\u3002<\/p>\n

7\u3001\u672c\u5730\u5b89\u88c5gulp\u63d2\u4ef6<\/h3>\n

7.1\u3001\u5b89\u88c5\uff1a\u5b9a\u4f4d\u76ee\u5f55\u547d\u4ee4\u540e\u63d0\u793a\u7b26\u6267\u884ccnpm install --save-dev<\/code><\/strong>\uff1b<\/p>\n

7.2\u3001\u672c\u793a\u4f8b\u4ee5gulp-less\u4e3a\u4f8b\uff08\u7f16\u8bd1less\u6587\u4ef6\uff09\uff0c\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884ccnpm install gulp-less --save-dev<\/code><\/strong>\uff1b<\/p>\n

\"\"<\/p>\n

7.3\u3001\u5c06\u4f1a\u5b89\u88c5\u5728node_modules\u7684gulp-less\u76ee\u5f55\u4e0b\uff0c\u8be5\u76ee\u5f55\u4e0b\u6709\u4e00\u4e2agulp-less\u7684\u4f7f\u7528\u5e2e\u52a9\u6587\u6863README.md\uff1b<\/p>\n

7.4\u3001\u4e3a\u4e86\u80fd\u6b63\u5e38\u4f7f\u7528\uff0c\u6211\u4eec\u8fd8\u5f97\u672c\u5730\u5b89\u88c5gulp\uff1acnpm install gulp --save-dev<\/code><\/strong>\uff1b<\/p>\n

PS\uff1a\u7ec6\u5fc3\u7684\u4f60\u53ef\u80fd\u4f1a\u53d1\u73b0\uff0c\u6211\u4eec\u5168\u5c40\u5b89\u88c5\u4e86gulp\uff0c\u9879\u76ee\u4e5f\u5b89\u88c5\u4e86gulp\uff0c\u5168\u5c40\u5b89\u88c5gulp\u662f\u4e3a\u4e86\u6267\u884cgulp\u4efb\u52a1\uff0c\u672c\u5730\u5b89\u88c5gulp\u5219\u662f\u4e3a\u4e86\u8c03\u7528gulp\u63d2\u4ef6\u7684\u529f\u80fd\u3002<\/p>\n

8\u3001\u65b0\u5efagulpfile.js\u6587\u4ef6\uff08\u91cd\u8981\uff09<\/h3>\n

8.1\u3001\u8bf4\u660e\uff1agulpfile.js\u662fgulp\u9879\u76ee\u7684\u914d\u7f6e\u6587\u4ef6\uff0c\u662f\u4f4d\u4e8e\u9879\u76ee\u6839\u76ee\u5f55\u7684\u666e\u901ajs\u6587\u4ef6\uff08\u5176\u5b9e\u5c06gulpfile.js\u653e\u5165\u5176\u4ed6\u6587\u4ef6\u5939\u4e0b\u4ea6\u53ef\uff09\u3002<\/p>\n

8.2\u3001\u5b83\u5927\u6982\u662f\u8fd9\u6837\u4e00\u4e2ajs\u6587\u4ef6\uff1a<\/p>\n

\n
\n
\n
\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n

JavaScript<\/span><\/p>\n<\/div>\n<\/div>\n

<\/div>\n
<\/div>\n
\n\n\n\n
\n
\n
1<\/div>\n
2<\/div>\n
3<\/div>\n
4<\/div>\n
5<\/div>\n
6<\/div>\n
7<\/div>\n
8<\/div>\n
9<\/div>\n
10<\/div>\n
11<\/div>\n
12<\/div>\n
13<\/div>\n
14<\/div>\n
15<\/div>\n
16<\/div>\n<\/div>\n<\/td>\n
\n
\n
\/\/\u5bfc\u5165\u5de5\u5177\u5305 require(‘node_modules\u91cc\u5bf9\u5e94\u6a21\u5757’)<\/span><\/div>\n
var<\/span> gulp<\/span> =<\/span> require<\/span>(<\/span>‘gulp’<\/span>)<\/span>,<\/span> \/\/\u672c\u5730\u5b89\u88c5gulp\u6240\u7528\u5230\u7684\u5730\u65b9<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>less<\/span> =<\/span> require<\/span>(<\/span>‘gulp-less’<\/span>)<\/span>;<\/span><\/div>\n
<\/div>\n
\/\/\u5b9a\u4e49\u4e00\u4e2atestLess\u4efb\u52a1\uff08\u81ea\u5b9a\u4e49\u4efb\u52a1\u540d\u79f0\uff09<\/span><\/div>\n
gulp<\/span>.<\/span>task<\/span>(<\/span>‘testLess’<\/span>,<\/span> function<\/span> (<\/span>)<\/span> {<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/span>gulp<\/span>.<\/span>src<\/span>(<\/span>‘src\/less\/index.less’<\/span>)<\/span> \/\/\u8be5\u4efb\u52a1\u9488\u5bf9\u7684\u6587\u4ef6<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>pipe<\/span>(<\/span>less<\/span>(<\/span>)<\/span>)<\/span> \/\/\u8be5\u4efb\u52a1\u8c03\u7528\u7684\u6a21\u5757<\/span><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span>.<\/span>pipe<\/span>(<\/span>gulp<\/span>.<\/span>dest<\/span>(<\/span>‘src\/css’<\/span>)<\/span>)<\/span>;<\/span> \/\/\u5c06\u4f1a\u5728src\/css\u4e0b\u751f\u6210index.css<\/span><\/div>\n
}<\/span>)<\/span>;<\/span><\/div>\n
<\/div>\n
gulp<\/span>.<\/span>task<\/span>(<\/span>‘default’<\/span>,<\/span>[<\/span>‘testLess’<\/span>,<\/span> ‘elseTask’<\/span>]<\/span>)<\/span>;<\/span> \/\/\u5b9a\u4e49\u9ed8\u8ba4\u4efb\u52a1 elseTask\u4e3a\u5176\u4ed6\u4efb\u52a1\uff0c\u8be5\u793a\u4f8b\u6ca1\u6709\u5b9a\u4e49elseTask\u4efb\u52a1<\/span><\/div>\n
<\/div>\n
\/\/gulp.task(name[, deps], fn) \u5b9a\u4e49\u4efb\u52a1\u00a0\u00a0name\uff1a\u4efb\u52a1\u540d\u79f0 deps\uff1a\u4f9d\u8d56\u4efb\u52a1\u540d\u79f0 fn\uff1a\u56de\u8c03\u51fd\u6570<\/span><\/div>\n
\/\/gulp.src(globs[, options]) \u6267\u884c\u4efb\u52a1\u5904\u7406\u7684\u6587\u4ef6\u00a0\u00a0globs\uff1a\u5904\u7406\u7684\u6587\u4ef6\u8def\u5f84(\u5b57\u7b26\u4e32\u6216\u8005\u5b57\u7b26\u4e32\u6570\u7ec4) <\/span><\/div>\n
\/\/gulp.dest(path[, options]) \u5904\u7406\u5b8c\u540e\u6587\u4ef6\u751f\u6210\u8def\u5f84<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<\/div>\n

9\u3001\u8fd0\u884cgulp<\/h3>\n

9.1\u3001\u8bf4\u660e\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cgulp \u4efb\u52a1\u540d\u79f0<\/strong>\uff1b<\/p>\n

9.2\u3001\u7f16\u8bd1less\uff1a\u547d\u4ee4\u63d0\u793a\u7b26\u6267\u884cgulp testLess<\/strong>\uff1b<\/p>\n

9.3\u3001\u5f53\u6267\u884cgulp default<\/strong>\u6216gulp<\/strong>\u5c06\u4f1a\u8c03\u7528default\u4efb\u52a1\u91cc\u7684\u6240\u6709\u4efb\u52a1[\u2018testLess\u2019,\u2019elseTask\u2019]\u3002<\/p>\n

10\u3001\u4f7f\u7528webstorm\u8fd0\u884cgulp\u4efb\u52a1<\/h3>\n

10.1\u3001\u8bf4\u660e\uff1a\u4f7f\u7528webstorm\u53ef\u89c6\u5316\u8fd0\u884cgulp\u4efb\u52a1\uff1b<\/p>\n

10.2\u3001\u4f7f\u7528\u65b9\u6cd5\uff1a\u5c06\u9879\u76ee\u5bfc\u5165webstorm\uff0c\u53f3\u952egulpfile.js \u9009\u62e9\u201dShow Gulp Tasks\u201d\u6253\u5f00Gulp\u7a97\u53e3\uff0c\u82e5\u51fa\u73b0\u201dNo task found\u201d\uff0c\u9009\u62e9\u53f3\u952e\u201dReload tasks\u201d\uff0c\u53cc\u51fb\u8fd0\u884c\u5373\u53ef\u3002<\/p>\n

\"\"<\/p>\n

11\u3001\u603b\u7ed3<\/h3>\n

11.1\u3001\u5b89\u88c5nodejs\uff1b<\/p>\n

11.2\u3001\u65b0\u5efapackage.json\u6587\u4ef6\uff1b<\/p>\n

11.3\u3001\u5168\u5c40\u548c\u672c\u5730\u5b89\u88c5gulp\uff1b<\/p>\n

11.4\u3001\u5b89\u88c5gulp\u63d2\u4ef6\uff1b<\/p>\n

11.5\u3001\u65b0\u5efagulpfile.js\u6587\u4ef6\uff1b<\/p>\n

11.6\u3001\u901a\u8fc7\u547d\u4ee4\u63d0\u793a\u7b26\u8fd0\u884cgulp\u4efb\u52a1\u3002<\/p>\n

12\u3001\u7ed3\u675f\u8bed<\/h3>\n

12.1\u3001\u672c\u6587\u6709\u4efb\u4f55\u9519\u8bef\uff0c\u6216\u6709\u4efb\u4f55\u7591\u95ee\uff0c\u6b22\u8fce\u7559\u8a00\u8bf4\u660e\u3002<\/p>\n<\/article>\n

<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

gulp\u8be6\u7ec6\u5165\u95e8\u6559\u7a0b \u7b80\u4ecb\uff1a gulp\u662f\u524d\u7aef\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u5bf9\u4ee3\u7801\u8fdb\u884c\u6784\u5efa\u7684\u5de5\u5177\uff0c\u662f\u81ea\u52a8\u5316\u9879\u76ee\u7684\u6784\u5efa\u5229\u5668\uff1b\u5979\u4e0d\u4ec5\u80fd\u5bf9…<\/p>\n","protected":false},"author":2,"featured_media":2041,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"categories":[38,56],"tags":[150],"_links":{"self":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2039"}],"collection":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/comments?post=2039"}],"version-history":[{"count":2,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2039\/revisions"}],"predecessor-version":[{"id":2045,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/posts\/2039\/revisions\/2045"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media\/2041"}],"wp:attachment":[{"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/media?parent=2039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/categories?post=2039"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.daliane.com\/category\/jinjiaoyou\/wp-json\/wp\/v2\/tags?post=2039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}