{"id":589,"date":"2021-04-14T18:10:06","date_gmt":"2021-04-14T10:10:06","guid":{"rendered":"http:\/\/blog.viter.top\/?p=589"},"modified":"2021-04-14T18:16:57","modified_gmt":"2021-04-14T10:16:57","slug":"gulpfile-jsgulp-4-0-2","status":"publish","type":"post","link":"https:\/\/blog.viter.top\/index.php\/2021\/04\/14\/gulpfile-jsgulp-4-0-2\/","title":{"rendered":"gulpfile.js(gulp 4.0.2)"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>const gulp = require('gulp')\n\nconst cssmin = require('gulp-cssmin')\n\nconst autoPrefixer = require('gulp-autoprefixer')\n\nconst sass = require('gulp-sass')\n\nconst uglify = require('gulp-uglify')\n\nconst htmlmin = require('gulp-htmlmin')\n\nconst tinypngFree = require('gulp-tinypng-free');\n\nconst del = require('del')\n\nconst webserver = require('gulp-webserver')\n\nconst fileinclude = require('gulp-file-include');\n\nconst cssHandler = function() {\n  return gulp\n    .src('.\/src\/css\/*.css')\n    .pipe(autoPrefixer())\n    .pipe(cssmin())\n    .pipe(gulp.dest('.\/dist\/css\/'))\n}\n\nconst scssHandler = function() {\n  return gulp\n    .src('.\/src\/css\/*.scss')\n    .pipe(sass())\n    .pipe(autoPrefixer())\n    .pipe(cssmin())\n    .pipe(gulp.dest('.\/dist\/css\/'))\n}\n\nconst jsHandler = function() {\n  return gulp\n    .src('.\/src\/js\/test.js')\n    .pipe(uglify({mangle:{toplevel:true}}))\n    .pipe(gulp.dest('.\/dist\/js\/'))\n}\n\nconst htmlHandler = function() {\n  return gulp\n    .src('.\/src\/*.html')\n    .pipe(fileinclude({\n      prefix: '@@'\n    }))\n    .pipe(htmlmin({\n      removeAttributeQuotes: true\n    }))\n    .pipe(gulp.dest('.\/dist\/'))\n}\n\nconst imgHandler = function() {\n  return gulp\n    .src('.\/src\/imgs\/*.?(png|jpg|jpeg|gif)')\n    \/\/ .src('.\/src\/imgs\/*.png')\n    .pipe(tinypngFree({}))\n    .pipe(gulp.dest('.\/dist\/imgs\/'))\n}\n\nconst imgCopyHandler = function() {\n  return gulp\n    .src('.\/src\/imgs\/*.?(png|jpg|jpeg|gif)')\n    .pipe(gulp.dest('.\/dist\/imgs\/'))\n}\n\nconst delHandler = function() {\n  return del(&#91;'.\/dist\/'])\n}\n\nconst webHandler = function() {\n  return gulp\n    .src('.\/dist')\n    .pipe(webserver({\n      host: '127.0.0.1',\n      port: 8080,\n      livereload: true,\n      open: '.\/index.html'\n    }))\n}\n\nconst watchHandler = function() {\n  gulp.watch('.\/src\/css\/*.css', cssHandler)\n  gulp.watch('.\/src\/css\/*.scss', scssHandler)\n  gulp.watch('.\/src\/js\/*.js', jsHandler)\n  gulp.watch('.\/src\/imgs\/*.?(png|jpg|jpeg|gif)', imgCopyHandler)\n  gulp.watch('.\/src\/*.html', htmlHandler)\n}\n\nmodule.exports.cssHandler = cssHandler\nmodule.exports.scssHandler = scssHandler\nmodule.exports.jsHandler = jsHandler\nmodule.exports.htmlHandler = htmlHandler\nmodule.exports.imgHandler = imgHandler\nmodule.exports.delHandler = delHandler\n\nconst devOperation = gulp.parallel(cssHandler, scssHandler, jsHandler, htmlHandler, imgCopyHandler)\nconst buildOperation = gulp.parallel(cssHandler, scssHandler, jsHandler, htmlHandler, imgHandler)\n\nmodule.exports.dev = gulp.series(\n  devOperation,\n  webHandler,\n  watchHandler\n)\n\nmodule.exports.build = gulp.series(\n  delHandler,\n  buildOperation\n)\n\n\n<\/code><\/pre>\n\n\n\n<p>package.json<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n  \"name\": \"demo01\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"dependencies\": {},\n  \"devDependencies\": {\n    \"del\": \"^6.0.0\",\n    \"gulp\": \"^4.0.2\",\n    \"gulp-autoprefixer\": \"^7.0.1\",\n    \"gulp-cssmin\": \"^0.2.0\",\n    \"gulp-file-include\": \"^2.3.0\",\n    \"gulp-htmlmin\": \"^5.0.1\",\n    \"gulp-sass\": \"^4.1.0\",\n    \"gulp-tinypng-free\": \"^1.0.13\",\n    \"gulp-uglify\": \"^3.0.2\",\n    \"gulp-webserver\": \"^0.9.1\"\n  },\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" &amp;&amp; exit 1\",\n    \"dev\": \"gulp dev\",\n    \"build\": \"gulp build\"\n  },\n  \"browserslist\": {\n    \"development\": &#91;\n      \"&gt;0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ],\n    \"production\": &#91;\n      \"&gt;0.2%\",\n      \"not dead\",\n      \"not op_mini all\"\n    ]\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>package.json<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[],"tags":[15],"_links":{"self":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/589"}],"collection":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/comments?post=589"}],"version-history":[{"count":5,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":596,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/posts\/589\/revisions\/596"}],"wp:attachment":[{"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/media?parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/categories?post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.viter.top\/index.php\/wp-json\/wp\/v2\/tags?post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}