{"id":5943,"date":"2017-09-15T22:07:15","date_gmt":"2017-09-15T14:07:15","guid":{"rendered":"https:\/\/sdeno.com\/?p=5943"},"modified":"2018-06-21T20:40:31","modified_gmt":"2018-06-21T12:40:31","slug":"sdfsdf","status":"publish","type":"post","link":"https:\/\/sdeno.com\/?p=5943","title":{"rendered":"gulp+webpack 3 \u7ed3\u5408\u642d\u5efa\u524d\u7aef\u81ea\u52a8\u5316\u5de5\u5177"},"content":{"rendered":"

gulp webpack \u7ec4\u5408 \u6253\u5305<\/p>\n

\u5728gulp\u7684\u73af\u5883\u91cc\u8c03\u7528webpack3(\u5f53\u524d\u662f3.5.6)\u8fd9\u91ccnodejs\u73af\u5883\u662fv8.1.0;npm\u662f5.0.3\uff0c\u5728\u8fd9\u91cc\u6211\u8ba9webpack\u4e3b\u8981\u8d1f\u8d23\u628ajs\u7edf\u4e00\u6253\u5305\u6210\u6a21\u5757\u5e76\u4e14es6\u8f6ces5\uff0c\u517c\u5bb9ie8\u6d4f\u89c8\u5668\u3002<\/p>\n

\u8fd9\u91cc\u6765\u770b\u4e00\u4e0b\u91cd\u8981\u7684\u914d\u7f6e\u6587\u4ef6\uff1a<\/p>\n

\/\/package.json\r\n{\r\n  \"name\": \"gulp_es6\",\r\n  \"version\": \"1.0.0\",\r\n  \"description\": \"\",\r\n  \"main\": \"gulpfile.js\",\r\n  \"scripts\": {\r\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\r\n    \"gulp\": \"gulp\"\r\n  },\r\n  \"keywords\": [],\r\n  \"author\": \"\",\r\n  \"license\": \"ISC\",\r\n  \"devDependencies\": {\r\n    \"autoprefixer-core\": \"^6.0.1\",\r\n    \"babel-core\": \"^6.26.0\",\r\n    \"babel-loader\": \"^7.1.2\",\r\n    \"babel-plugin-transform-es2015-arrow-functions\": \"^6.22.0\",\r\n    \"babel-preset-env\": \"^2.0.0-beta.1\",\r\n    \"babel-preset-react\": \"^6.24.1\",\r\n    \"css-loader\": \"^0.28.7\",\r\n    \"del\": \"^3.0.0\",\r\n    \"expose-loader\": \"^0.7.3\",\r\n    \"file-loader\": \"^0.11.2\",\r\n    \"gulp\": \"^3.9.1\",\r\n    \"gulp-babel\": \"^7.0.0\",\r\n    \"gulp-base64\": \"^0.1.3\",\r\n    \"gulp-cheerio\": \"^0.6.2\",\r\n    \"gulp-concat\": \"^2.6.1\",\r\n    \"gulp-file-include\": \"^1.2.0\",\r\n    \"gulp-htmlmin\": \"^3.0.0\",\r\n    \"gulp-if\": \"^2.0.2\",\r\n    \"gulp-imagemin\": \"^3.3.0\",\r\n    \"gulp-make-css-url-version\": \"0.0.13\",\r\n    \"gulp-minify-css\": \"^1.2.4\",\r\n    \"gulp-notify\": \"^3.0.0\",\r\n    \"gulp-postcss\": \"^7.0.0\",\r\n    \"gulp-rename\": \"^1.2.2\",\r\n    \"gulp-rev-append\": \"^0.1.8\",\r\n    \"gulp-uglify\": \"^3.0.0\",\r\n    \"gulp-useref\": \"^3.1.2\",\r\n    \"jquery\": \"^1.11.0\",\r\n    \"style-loader\": \"^0.18.2\",\r\n    \"uglifyjs-webpack-plugin\": \"^1.0.0-rc.0\",\r\n    \"vue\": \"^2.4.4\",\r\n    \"webpack-stream\": \"^4.0.0\"\r\n  },\r\n  \"dependencies\": {\r\n    \"vinyl-named\": \"^1.1.0\"\r\n  }\r\n}<\/pre>\n
*\u6ce8\u610f<\/span>\uff1a\u89e3\u538b\u540e\u4fee\u6539\u4e3a \u00a0“gulp”: “node .\/node_modules\/gulp\/bin\/gulp”<\/p>\n
 <\/p>\n
\/\/gulpfile.js\r\nvar gulp = require('gulp');\r\nvar cssmin = require('gulp-minify-css'); \/\/\u538b\u7f29\uff0c\u5220\u9664\u6ce8\u91ca\u3001\u6362\u884c\uff0c\u5408\u5e76\u9009\u62e9\u5668\r\nvar cssver = require('gulp-make-css-url-version'); \/\/\u4e3acss\u7684url\u80cc\u666f\u56fe\u7247\u6dfb\u52a0mdb5,\u9632\u6b62\u7f13\u5b58\r\nvar concat = require('gulp-concat');\/\/\u5408\u5e76css\u3001js\r\nvar uglify = require('gulp-uglify'); \/\/js\u538b\u7f29\r\nvar notify = require('gulp-notify'); \/\/\u4efb\u52a1\u6267\u884c\u6210\u529f\u63d0\u793a\r\nvar htmlmin = require('gulp-htmlmin');\/\/\u5bf9html\u9875\u9762\u538b\u7f29\u5904\u7406\r\nvar postcss = require('gulp-postcss'); \/\/\u81ea\u52a8\u6dfb\u52a0css\u524d\u7f00\r\nvar autoprefixer = require('autoprefixer-core');\/\/\u81ea\u52a8\u6dfb\u52a0css\u524d\u7f00\r\nvar rev = require('gulp-rev-append'); \/\/\u4e3ahtml\u7684js\u3001css\u6dfb\u52a0\u7248\u672c\u53f7\r\nvar cheerio = require('gulp-cheerio'); \/\/\u64cd\u4f5chtml\u7684dom\uff0c\u76ee\u7684\u5408\u5e76\u591a\u4e2ajs\u6216\u8005css\u94fe\u63a5\r\nvar useref = require('gulp-useref');  \/\/\u5c06html\u4e2d\u591a\u4e2alink\u548cscript\u5404\u81ea\u5408\u5e76\u6210\u4e00\u4e2a\r\nvar del = require('del');  \/\/\u5220\u9664\u6587\u4ef6\r\nvar gulpif = require('gulp-if');\r\nvar imageMin = require('gulp-imagemin');  \/\/\u56fe\u7247\u538b\u7f29\r\nvar babel = require(\"gulp-babel\");\r\nvar fileinclude  = require('gulp-file-include');\r\nvar base64 = require('gulp-base64');  \/\/\u5c06css\u91cc\u9762\u7684\u5c0f\u56fe\u7247\u8f6c\u5316\u4e3abase64\r\nvar webpack = require('webpack-stream');\r\nvar webpack2 = require('.\/node_modules\/webpack');\r\nvar rename = require(\"gulp-rename\");\r\nvar UglifyJSPlugin = require('uglifyjs-webpack-plugin');\r\nvar named = require('vinyl-named');\r\n\r\ngulp.task('fileinclude', function() {\r\n    \/\/ \u9002\u914dpage\u4e2d\u6240\u6709\u6587\u4ef6\u5939\u4e0b\u7684\u6240\u6709html\uff0c\u6392\u9664page\u4e0b\u7684include\u6587\u4ef6\u5939\u4e2dhtml\r\n    gulp.src(['src\/**\/*.html'])\r\n        .pipe(fileinclude({\r\n            prefix: '@@',\r\n            basepath: '@file'\r\n        }))\r\n        .pipe(gulp.dest('dist'))\r\n    .on('end', function () {\r\n        gulp.src('src\/*.html')\r\n\r\n            .pipe(useref())\r\n            \/\/.pipe(gulpif('*.js', babel())) \/\/\u8f6c\u5316es6\u4e3aes5,\u4f46\u662fie8\u7528\u4e0d\u4e86\uff0cie9\u53ef\u4ee5\r\n            \/\/ .pipe(gulpif('*.js', uglify({\r\n            \/\/     mangle:false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue \u662f\u5426\u4fee\u6539\u53d8\u91cf\u540d\r\n            \/\/     compress:false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue \u662f\u5426\u5b8c\u5168\u538b\u7f29\r\n            \/\/     \/\/ preserveComments:'all'\/\/\u4fdd\u7559\u6240\u6709\u6ce8\u91ca\r\n            \/\/ })))\r\n            .pipe(gulpif('*.css', cssmin({\r\n                advanced: false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue [\u662f\u5426\u5f00\u542f\u9ad8\u7ea7\u4f18\u5316\uff08\u5408\u5e76\u9009\u62e9\u5668\u7b49\uff09]\r\n                compatibility: 'ie7',\/\/\u4fdd\u7559ie7\u53ca\u4ee5\u4e0b\u517c\u5bb9\u5199\u6cd5 \u7c7b\u578b\uff1aString \u9ed8\u8ba4\uff1a''or'*' [\u542f\u7528\u517c\u5bb9\u6a21\u5f0f\uff1b 'ie7'\uff1aIE7\u517c\u5bb9\u6a21\u5f0f\uff0c'ie8'\uff1aIE8\u517c\u5bb9\u6a21\u5f0f\uff0c'*'\uff1aIE9+\u517c\u5bb9\u6a21\u5f0f]\r\n                keepBreaks: false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1afalse [\u662f\u5426\u4fdd\u7559\u6362\u884c]\r\n                keepSpecialComments: '*'\/\/\u4fdd\u7559\u6240\u6709\u7279\u6b8a\u524d\u7f00 \u5f53\u4f60\u7528autoprefixer\u751f\u6210\u7684\u6d4f\u89c8\u5668\u524d\u7f00\uff0c\u5982\u679c\u4e0d\u52a0\u8fd9\u4e2a\u53c2\u6570\uff0c\u6709\u53ef\u80fd\u5c06\u4f1a\u5220\u9664\u4f60\u7684\u90e8\u5206\u524d\u7f00\r\n            })))\r\n            .pipe(gulpif('*.css',postcss([ autoprefixer({ browsers: [\"> 0%\"] }) ])))\r\n            .pipe(gulpif('*.css',cssver()))\r\n            .pipe( gulpif('*.css',base64({\r\n                \/\/ baseDir: 'public',\r\n                \/\/ extensions: ['svg', 'png', \/\\.jpg#datauri$\/i],\r\n                \/\/ exclude:    [\/\\.server\\.(com|net)\\\/dynamic\\\/\/, '--live.jpg'],\r\n                maxImageSize: 5*1024 \/\/ \u5c0f\u4e8e5KB\u7684\u56fe\u7247\u5c31\u4f1a\u88ab\u8f6c\u5316\u4e3abase64\r\n                \/\/ debug: true\r\n            })))\r\n            .pipe(gulpif('*.html',htmlmin({\r\n                removeComments: true,\/\/\u6e05\u9664HTML\u6ce8\u91ca\r\n                collapseWhitespace: true,\/\/\u538b\u7f29HTML\r\n                collapseBooleanAttributes: true,\/\/\u7701\u7565\u5e03\u5c14\u5c5e\u6027\u7684\u503c <input checked=\"true\"\/> ==> <input \/>\r\n                removeEmptyAttributes: true,\/\/\u5220\u9664\u6240\u6709\u7a7a\u683c\u4f5c\u5c5e\u6027\u503c <input id=\"\" \/> ==> <input \/>\r\n                removeScriptTypeAttributes: true,\/\/\u5220\u9664<script>\u7684type=\"text\/javascript\"\r\n                removeStyleLinkTypeAttributes: true,\/\/\u5220\u9664<style>\u548c<link>\u7684type=\"text\/css\"\r\n                minifyJS: true,\/\/\u538b\u7f29\u9875\u9762JS\r\n                minifyCSS: true\/\/\u538b\u7f29\u9875\u9762CSS\r\n            })))\r\n            .pipe(gulpif('*.html',rev()))\r\n            \/\/.pipe(gulpif('*.html',cheerio(function ($, file) {\r\n            \/\/    $('link').eq(0).remove();\r\n            \/\/    $('head').append('<link rel=\"stylesheet\" href=\"css\/css.min.css?rev='+Math.random()+'\">');\r\n            \/\/    $('script').eq(0).remove();\r\n            \/\/    $('head').append('<script src=\"js\/all.min.js?rev='+Math.random()+'\"><\/script>');\r\n            \/\/})))\r\n            .pipe(gulp.dest('dist'))\r\n\r\n    });\r\n});\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\/\/\u628a\u72ec\u7acb\u7684js\u590d\u5236\u5230dist\/js\u7684\u6839\u76ee\u5f55\u4e0b\r\ngulp.task('copy',  function() {\r\n    gulp.src('src\/js\/*.*')\r\n        .pipe(gulp.dest('dist\/js'))\r\n});\r\n\r\n\r\n\r\n\r\n\r\n\/\/\u56fe\u7247\u538b\u7f29\r\ngulp.task('img', function () {\r\n    gulp.src('src\/images\/*.*')\r\n        .pipe(imageMin({progressive: true}))\r\n        .pipe(gulp.dest('dist\/images'));\r\n});\r\n\r\n\r\n\r\n\/\/\u4e3a\u6b64\u4efb\u52a1\u547d\u540d\u4e3awatch\r\n\/\/ gulp.task('watch',function(){\r\n\/\/     gulp.watch('src\/**\/*.css',['sync']); \/\/\u5728css\u76ee\u5f55\u4e0b\u7684\u6240\u6709\u6587\u4ef6\u5939\u7684\u540e\u7f00\u662fcss\u7684\u6587\u4ef6\uff0c\u4e00\u65e6\u4fee\u6539\u5c31\u81ea\u52a8\u6267\u884ctestCssmin\u4efb\u52a1\r\n\/\/     gulp.watch('src\/**\/*.js',['sync']);\r\n\/\/ });\r\n\r\n\/\/\u76d1\u542c src\u76ee\u5f55\u4e0b\u7684css \u548c js  \u8fd8\u6709view\u76ee\u5f55\u4e0b\u7684html\u4e00\u65e6\u6709\u53d8\u5316\u5c31\u66f4\u65b0\r\ngulp.task('watch',function(){\r\n    gulp.watch(['src\/**\/*.css','src\/**\/*.js','src\/**\/*.html'],function () {\r\n            gulp.src(['view\/**\/*.html'])\r\n                .pipe(fileinclude({\r\n                    prefix: '@@',\r\n                    basepath: '@file'\r\n                }))\r\n                .pipe(gulp.dest('src'))\r\n                .on('end', function () {\r\n                    gulp.src('src\/*.html')\r\n\r\n                        .pipe(useref())\r\n                        \/\/ .pipe(gulpif('*.js', uglify({\r\n                        \/\/     mangle:false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue \u662f\u5426\u4fee\u6539\u53d8\u91cf\u540d\r\n                        \/\/     compress:false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue \u662f\u5426\u5b8c\u5168\u538b\u7f29\r\n                        \/\/     \/\/ preserveComments:'all'\/\/\u4fdd\u7559\u6240\u6709\u6ce8\u91ca\r\n                        \/\/ })))\r\n                        .pipe(gulpif('*.css', cssmin({\r\n                            advanced: false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1atrue [\u662f\u5426\u5f00\u542f\u9ad8\u7ea7\u4f18\u5316\uff08\u5408\u5e76\u9009\u62e9\u5668\u7b49\uff09]\r\n                            compatibility: 'ie7',\/\/\u4fdd\u7559ie7\u53ca\u4ee5\u4e0b\u517c\u5bb9\u5199\u6cd5 \u7c7b\u578b\uff1aString \u9ed8\u8ba4\uff1a''or'*' [\u542f\u7528\u517c\u5bb9\u6a21\u5f0f\uff1b 'ie7'\uff1aIE7\u517c\u5bb9\u6a21\u5f0f\uff0c'ie8'\uff1aIE8\u517c\u5bb9\u6a21\u5f0f\uff0c'*'\uff1aIE9+\u517c\u5bb9\u6a21\u5f0f]\r\n                            keepBreaks: false,\/\/\u7c7b\u578b\uff1aBoolean \u9ed8\u8ba4\uff1afalse [\u662f\u5426\u4fdd\u7559\u6362\u884c]\r\n                            keepSpecialComments: '*'\/\/\u4fdd\u7559\u6240\u6709\u7279\u6b8a\u524d\u7f00 \u5f53\u4f60\u7528autoprefixer\u751f\u6210\u7684\u6d4f\u89c8\u5668\u524d\u7f00\uff0c\u5982\u679c\u4e0d\u52a0\u8fd9\u4e2a\u53c2\u6570\uff0c\u6709\u53ef\u80fd\u5c06\u4f1a\u5220\u9664\u4f60\u7684\u90e8\u5206\u524d\u7f00\r\n                        })))\r\n                        .pipe(gulpif('*.css',postcss([ autoprefixer({ browsers: [\"> 0%\"] }) ])))\r\n                        .pipe(gulpif('*.css',cssver()))\r\n                        .pipe( gulpif('*.css',base64({\r\n                            maxImageSize: 5*1024 \/\/ \u5c0f\u4e8e5KB\u7684\u56fe\u7247\u5c31\u4f1a\u88ab\u8f6c\u5316\u4e3abase64\r\n                        })))\r\n                        .pipe(gulpif('*.html',htmlmin({\r\n                            removeComments: true,\/\/\u6e05\u9664HTML\u6ce8\u91ca\r\n                            collapseWhitespace: true,\/\/\u538b\u7f29HTML\r\n                            collapseBooleanAttributes: true,\/\/\u7701\u7565\u5e03\u5c14\u5c5e\u6027\u7684\u503c <input checked=\"true\"\/> ==> <input \/>\r\n                            removeEmptyAttributes: true,\/\/\u5220\u9664\u6240\u6709\u7a7a\u683c\u4f5c\u5c5e\u6027\u503c <input id=\"\" \/> ==> <input \/>\r\n                            removeScriptTypeAttributes: true,\/\/\u5220\u9664<script>\u7684type=\"text\/javascript\"\r\n                            removeStyleLinkTypeAttributes: true,\/\/\u5220\u9664<style>\u548c<link>\u7684type=\"text\/css\"\r\n                            minifyJS: true,\/\/\u538b\u7f29\u9875\u9762JS\r\n                            minifyCSS: true\/\/\u538b\u7f29\u9875\u9762CSS\r\n                        })))\r\n                        .pipe(gulpif('*.html',rev()))\r\n                        .pipe(gulp.dest('dist'))\r\n\r\n                });\r\n    });\r\n});\r\n\r\n\r\n\/\/\u4fee\u6539view\u76ee\u5f55\u4e0b\u7684html\u5c31\u81ea\u52a8\u5728src\u6839\u76ee\u5f55\u4e0b\u751f\u6210html\r\n\/\/ gulp.task('watch_html',function(){\r\n\/\/     gulp.watch('src\/**\/*.html',['fileinclude']); \/\/\u5728css\u76ee\u5f55\u4e0b\u7684\u6240\u6709\u6587\u4ef6\u5939\u7684\u540e\u7f00\u662fcss\u7684\u6587\u4ef6\uff0c\u4e00\u65e6\u4fee\u6539\u5c31\u81ea\u52a8\u6267\u884ctestCssmin\u4efb\u52a1\r\n\/\/ });\r\n\r\n\r\n\r\n\/\/gulp\u7684\u9ed8\u8ba4\u6267\u884c\u7684\u4efb\u52a1\u5c31\u662fwatch\u4efb\u52a1\r\n\/\/gulp.task('default',['testCssmin','js','html','watch'], function() {\r\n\/\/    \/\/ \u5c06\u4f60\u7684\u9ed8\u8ba4\u7684\u4efb\u52a1\u4ee3\u7801\u653e\u5728\u8fd9\r\n\/\/});\r\n\r\n\r\ngulp.task('default',['fileinclude','img','copy','watch'], function() {\r\n   \/\/ \u5c06\u4f60\u7684\u9ed8\u8ba4\u7684\u4efb\u52a1\u4ee3\u7801\u653e\u5728\u8fd9\r\n    return gulp.src(['src\/js\/a.js','src\/js\/b.js','src\/js\/css.js'])\r\n        .pipe(named())  \/\/\u53ef\u4ee5\u5c06\u591a\u4e2ajs ['src\/js\/a.js','src\/js\/b.js','src\/js\/css.js'] \u5206\u5f00\u6253\u5305\r\n        .pipe(webpack({\r\n            watch: true,\r\n            module: {\r\n                loaders: [\r\n                    { test: \/\\.css$\/, loader: 'style-loader!css-loader' },\r\n                    { test: \/\\.(png|jpg|jpeg|gif|woff)$\/, loader: 'file-loader',query: {name: 'images\/[name].[ext]'} },\r\n                    {\r\n                        test: \/\\.js|jsx$\/, \/\/\u662f\u4e00\u4e2a\u6b63\u5219\uff0c\u4ee3\u8868js\u6216\u8005jsx\u540e\u7f00\u7684\u6587\u4ef6\u8981\u4f7f\u7528\u4e0b\u9762\u7684loader   npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react\r\n                        exclude: \/node_modules\/,\r\n                        loader: \"babel-loader\"\r\n                    },\r\n                ],\r\n            },\r\n            plugins: [ \/\/\u6269\u5c55webpack\u989d\u5916\u7684\u529f\u80fd\uff0c\u8981\u4f7f\u7528webpack\u81ea\u5e26\u63d2\u4ef6\u5c31\u5f15\u5165webpack\uff0c\u5176\u4ed6\u529f\u80fd\u7684\u8bdd\u5c31\u989d\u5916\u5b89\u88c5\u5176\u4ed6\u63d2\u4ef6\r\n                new webpack2.BannerPlugin('\u8fd9\u4e2a\u63d2\u4ef6\u529f\u80fd\u662f\u5934\u90e8\u63d0\u793a\u529f\u80fd'),\r\n                \/\/ new UglifyJSPlugin({uglifyOptions:{\r\n                \/\/     ie8: true\r\n                \/\/ }})\r\n\r\n                \/\/ new webpack2.ProvidePlugin({  \/\/\u4f7f\u7528sudo npm install jquery@1.11.0\uff0c\u6765\u8c03\u7528jq,\u5e76\u5c06jq\u66b4\u9732\u6253\u5305\u6587\u4ef6\u5168\u5c40\u4e2d\uff0c\u76f8\u5f53\u4e8e\u7ed9window\u52a0\u4e86jquery\r\n                \/\/     $:\"jquery\",\r\n                \/\/     jQuery:\"jquery\",\r\n                \/\/     \"window.jQuery\":\"jquery\",\r\n                \/\/     'window.$': 'jquery'\r\n                \/\/ }),\r\n            ]\r\n        }))\r\n\r\n       \/\/ .pipe(rename(\"webpack_2.js\"))\r\n        .pipe(gulp.dest('dist\/js'));  \/\/   .\/dist\/js\/webpack_.js\r\n});<\/pre>\n
 <\/p>\n
\u4e3a\u4e86\u4ee5\u540e\u65b9\u4fbf\u4f7f\u7528\uff0c\u53ef\u4ee5\u76f4\u63a5\u4e0b\u5728\uff1a\u4e0b\u8f7d\u5730\u5740<\/a><\/p>\n
\u767e\u5ea6\u5730\u5740\uff1ahttps:\/\/pan.baidu.com\/s\/1slJoTvZ<\/a><\/p>\n
\u4f7f\u7528\u6b65\u9aa4\uff1a\uff08\u6b64\u5305\u5728mac\u4e0b\u6d4b\u8bd5\u901a\u8fc7\uff09<\/p>\n
1\uff0c\u4e0b\u8f7d\u89e3\u538b\u540e\u4e0d\u9700\u8981npm install\uff0c\u5168\u90e8\u4f9d\u8d56\u5305\u5df2\u7ecf\u5728\u91cc\u9762\u4e86\uff0c<\/p>\n
\u4fee\u6539package.json\uff0c\u4fee\u6539\u5185\u5bb9\u4e3a”gulp”: “node .\/node_modules\/gulp\/bin\/gulp”\uff0c\u5e76\u8ba9\u6574\u4e2a\u76ee\u5f55\u6709\u6267\u884c\u6743\u9650chmod -R 777 \/xxx\/xxx<\/p>\n
2\uff0c\u76f4\u63a5\u5728shell\u547d\u4ee4\u91cc\u9762\u6267\u884cnpm run gulp\u5373\u53ef<\/p>\n
3\uff0c(1)\u7f16\u8f91html\uff0c\u5207\u6362\u5230\u76ee\u5f55.\/src\u4e2d<\/p>\n
(2)\u7f16\u8f91css\u3001js\u548c\u6dfb\u52a0\u56fe\u7247\uff0c\u5207\u6362\u5230\u76ee\u5f55.\/src\u4e2d<\/p>\n
4\uff0c\u6d4f\u89c8\u67e5\u770b\u672a\u7f16\u8bd1\u7684\u9875\u9762\u5c31\u6d4f\u89c8.\/src\u91cc\u9762\u7684html<\/p>\n
\u6d4f\u89c8\u5df2\u7ecf\u7f16\u8bd1\u597d\u7684\u9875\u9762\u67e5\u770b.\/dist\u91cc\u9762\u7684html<\/p>\n
———————-babel\u4e00\u4e9b\u5751——————————-<\/p>\n
babel\u5e76\u4e0d\u80fd\u628a\u6240\u6709\u7684es6\u529f\u80fd\u90fd\u80fd\u5b8c\u7f8e\u8f6c\u6362\u4e3aes5\uff1b<\/p>\n
babel\u8f6c\u5316\u8fc7\u7684js\u538b\u7f29\u540eie8\u6709\u95ee\u9898<\/p>\n
 <\/p>\n
\u4e0b\u6b21\u672c\u4eba\u6d4b\u8bd5\u53ef\u4ee5\u4f7f\u7528<\/p>\n
\/\/class\u65b9\u6cd5\u58f0\u660e \u9762\u5411\u5bf9\u8c61<\/p>\n
\/\/\u7bad\u5934\u51fd\u6570<\/p>\n
\/\/\u6a21\u677f<\/p>\n
\/\/\u9ed8\u8ba4\u53c2\u6570<\/p>\n
 <\/p>\n
————————————————————————————————————–<\/p>\n
gulp\u8d1f\u8d23\uff1a
\nhtml\u538b\u7f29\u3001css\u548cjs\u7684\u94fe\u63a5\u5206\u522b\u5408\u5e76\u3001css\u4ee3\u7801\u538b\u7f29<\/p>\n
 <\/p>\n
webpack\u8d1f\u8d23(\u4e3b\u8981\u5904\u7406js)\uff1a
\n\u5c06es6\u8f6c\u5316\u6210es5\uff0cjs\u538b\u7f29\u3001\u5408\u5e76(\u5408\u5e76\u540eie8\u4e0d\u517c\u5bb9)<\/p>\n
 <\/p>\n
\u63a8\u8350\uff1a
\n\u5982\u679c\u575a\u6301\u4f7f\u7528es6\u8f6ces5\u7684\u529f\u80fd\uff0c\u5c31\u4e0d\u80fd\u538b\u7f29\u5426\u5219ie8\u65e0\u6cd5\u5de5\u4f5c\uff0c\u9664\u975e\u4e0d\u8003\u8651\u517c\u5bb9ie8\u3002
\n\u4e0d\u662f\u6709\u7279\u6b8a\u9700\u6c42\u653e\u5f03\u4f7f\u7528webpack\uff0cjs\u7684\u538b\u7f29\u5408\u5e76\u90fd\u662f\u7528gulp\u6765\u5904\u7406\u3002<\/p>\n
 <\/p>\n
\u9700\u8981\u5408\u5e76\u94fe\u63a5\uff0c\u5e76\u5c06\u591a\u4e2ajs\u6253\u5305\u538b\u7f29\u5728\u4e00\u8d77\u5c31\u628ajs\u7edf\u4e00\u653e\u5728.\/src\/js\/public\/\u91cc\u9762\uff0c\u94fe\u63a5\u6700\u524d\u9762\u6700\u5148\u88ab\u52a0\u8f7d<\/p>\n
<!-- build:js js\/public\/public.min.js -->\r\n <script src=\".\/js\/public\/jquery.js\"><\/script>\r\n <script src=\".\/js\/public\/a.js\"><\/script>\r\n<!-- endbuild --><\/pre>\n
\u6253\u5305\u540e\u6210\u4e3a<\/p>\n
<script src=\"js\/public\/public.min.js\"><\/script><\/pre>\n
 <\/p>\n
\u9700\u8981\u5408\u5e76\u94fe\u63a5\uff0c\u5e76\u5c06\u591a\u4e2acss\u6253\u5305\u538b\u7f29\u5728\u4e00\u8d77\u5c31\u628acss\u7edf\u4e00\u653e\u5728.\/src\/css\/\u91cc\u9762\uff0c\u94fe\u63a5\u6700\u524d\u9762\u6700\u5148\u88ab\u52a0\u8f7d,\u6548\u679c\u8ddfjs\u4e00\u6837<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
gulp webpack \u7ec4\u5408 \u6253\u5305 \u5728gulp\u7684\u73af\u5883\u91cc\u8c03\u7528webpack3(\u5f53\u524d\u662f3.5.6)\u8fd9\u91ccnodej […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-5943","post","type-post","status-publish","format-standard","hentry","category-11"],"_links":{"self":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5943","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5943"}],"version-history":[{"count":0,"href":"https:\/\/sdeno.com\/index.php?rest_route=\/wp\/v2\/posts\/5943\/revisions"}],"wp:attachment":[{"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sdeno.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}