gulp · 编程开发笔记

> ## :-: 配置文件( gulpfile.js ) ``` // 引入gulp var gulp = require("gulp"), // image压缩插件 imagemin = require("gulp-imagemin"), // html压缩插件 clean -- 压缩 htmlclean = require("gulp-htmlclean"), // js压缩插件 uglify = require("gulp-uglify"), // 去掉js中的调试语句 stripDebug = require("gulp-strip-debug"), concat = require("gulp-concat"), deporder = require("gulp-deporder"), // 将less转换成css的插件 less = require("gulp-less"), postcss = require("gulp-postcss"), autoprefixer = require("autoprefixer"), cssnano = require("cssnano"), // 开启服务器 connect = require("gulp-connect"), // 判断当前的环境变量生产/开发 // devMode = process.env.NODE_ENV !== "production", devMode = false; // export NODE_ENV=development ----- 设置环境变量 var folder = { src: "src/", dist: "dist/src/" } //流操作 task running gulp.task("html", function() { var page = gulp.src("index.html") // 重新刷新 -- connect.reload() .pipe(connect.reload()); // 判断是否不为开发模式 (压缩) if (!devMode) { page.pipe(htmlclean()); } page.pipe(gulp.dest("dist/")) }) gulp.task("images", function() { gulp.src(folder.src + "images/*") .pipe(imagemin()) .pipe(gulp.dest(folder.dist + "images/")); }); gulp.task("js", function() { var js = gulp.src(folder.src + "js/*") .pipe(connect.reload()); if (!devMode) { js.pipe(uglify()) .pipe(stripDebug()) } js.pipe(gulp.dest(folder.dist + "js/")) }); gulp.task("css", function() { var css = gulp.src(folder.src + "css/*") .pipe(connect.reload()) .pipe(less()); var options = [autoprefixer()]; if (!devMode) { options.push(cssnano()); } css.pipe(postcss(options)) .pipe(gulp.dest(folder.dist + "css/")); }); // 监听文件变化 gulp.task("watch", function() { gulp.watch("index.html", ["html"]); gulp.watch(folder.src + "images/*", ["images"]); gulp.watch(folder.src + "js/*", ["js"]); gulp.watch(folder.src + "css/*", ["css"]); }); // gulp.task -- 创建任务 gulp.task("server", function() { // 开启服务器、 connect.server({ // 修改默认端口号 port: "9999", livereload: true }); }) gulp.task("default", ["html", "images", "js", "css", "watch", "server"]); // gulp Api (主要的) // --- gulp.src() // --- gulp.dest() // --- gulp.task() // --- gulp.watch() ``` > ## :-: package.json ``` { "name": "html5music", "version": "1.0.0", "description": "this is html5 music ", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [ "html5", "music" ], "author": "liuluwei", "license": "ISC", "devDependencies": { "autoprefixer": "^8.1.0", "cssnano": "^3.10.0", "gulp": "^3.9.1", "gulp-concat": "^2.6.1", "gulp-connect": "^5.5.0", "gulp-deporder": "^1.1.0", "gulp-htmlclean": "^2.7.20", "gulp-imagemin": "^4.1.0", "gulp-less": "^4.0.0", "gulp-postcss": "^7.0.1", "gulp-strip-debug": "^3.0.0", "gulp-uglify": "^3.0.0" }, "dependencies": { "jquery": "^3.3.1" } } ``` Demo - music-player：http://a-1.vip/demo/music-player/