From 57c3ad17ff92c550b2bfbc2eac92f6469c62e2fd Mon Sep 17 00:00:00 2001
From: haishan <710328466@qq.com>
Date: Wed, 25 May 2022 12:35:39 +0800
Subject: [PATCH] feat: gulp

---
 .gitignore       |   1 +
 gulpfile.js      |  26 ++++++
 gulpfile.temp.js | 200 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json     |  25 ++++++
 4 files changed, 252 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 gulpfile.js
 create mode 100644 gulpfile.temp.js
 create mode 100644 package.json

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..b512c09
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
\ No newline at end of file
diff --git a/gulpfile.js b/gulpfile.js
new file mode 100644
index 0000000..12801bc
--- /dev/null
+++ b/gulpfile.js
@@ -0,0 +1,26 @@
+const gulp = require('gulp'),
+      gulpWatch = require('gulp-watch'),      // 监听插件
+      gulpConnect = require('gulp-connect')   // 服务器插件
+
+// 监听
+gulp.task('watch', function () {
+  gulp.watch('src/index.html', ['html'])
+})
+
+// 监听html变化
+gulp.task('html', function () {
+  gulp.src('src/*.html')
+    .pipe(gulpConnect.reload())
+});
+
+// 服务器
+gulp.task('connect', function () {
+  var serverConfig = {
+    root: 'src',    // 从哪个目录开启server
+    port: 8080,        // 将服务开启在哪个端口
+    livereload: true    // 是否热更新
+  }
+  gulpConnect.server(serverConfig)
+})
+
+gulp.task("watching", ['connect', 'watch'])
diff --git a/gulpfile.temp.js b/gulpfile.temp.js
new file mode 100644
index 0000000..bb88539
--- /dev/null
+++ b/gulpfile.temp.js
@@ -0,0 +1,200 @@
+const gulp = require('gulp'),
+  lp = require('gulp-load-plugins')() //改变前缀
+  , concat = lp.concat //合并js到一个js文件
+  , minifyCSS = lp.minifyCss //css压缩
+  , minify = lp.minify //整合 js 
+  , zip = lp.zip       //解压
+  , htmlmin = lp.htmlmin               //html压缩
+  , autoPrefixer = lp.autoprefixer     //添加前缀
+  , imagemin = lp.imagemin      //图片压缩
+  , pngquant = require('imagemin-pngquant')     //图片压缩拓展包  
+  , inject = lp.inject          //添加文件路径
+  , cache = lp.cache            //图片改变时才开始操作
+  , rev = lp.revAppend          //添加版本号
+  , runSequence = lp.runSequence     //分批处理命令
+  , eslint = lp.eslint          //代码风格校验  jshint
+  , watch = lp.watch            //监视页面变化
+  , rename = lp.rename          //重命名文件
+  , notify = lp.notify          //加提示信息
+  , clean = lp.clean
+  , connect = lp.connect
+  , stylus = lp.stylus
+  , babel = lp.babel            // es6 转 es5
+  , env = lp.env
+  , gulpif = lp.if
+  , minimist = require('minimist')
+  , lujin = 'imgUploader'
+
+var knownOptions = {
+  string: 'env',
+  default: { env: process.env.NODE_ENV || 'production' }
+};
+
+var options = minimist(process.argv.slice(2), knownOptions);
+
+console.log(options);
+
+var serverPort = 'src/' + lujin + '/',
+  htmlSource = 'src/' + lujin + '/*.html',
+  htmlTarget = 'dist/' + lujin,
+  cssSource = './src/' + lujin + '/css/*.css',
+  cssTarget = './dist/' + lujin + '/css/',
+  stylusSource = './src/' + lujin + '/styl/*.styl',
+  stylusTarget = 'src/' + lujin + '/css',
+  jsSource = 'src/' + lujin + '/js/*.js',
+  jsTarget = './dist/' + lujin + '/js/',
+  imgSource = './src/' + lujin + '/img/*',
+  imgTarget = './dist/' + lujin + '/img/'
+
+var target = gulp.src('./dist/index.html'),
+  sources = gulp.src(['./dist/js/*.js'])
+
+
+gulp.task('scripts', function () {
+  return gulp.src('test.js')
+    .pipe(gulpif(options.env === 'production', minify())) // 仅在生产环境时候进行压缩
+    .pipe(gulp.dest('dist'));
+});
+
+// 文件路径
+gulp.task('inject', function () {
+  var target = gulp.src('./src/alipayActive/index.html');
+  // It's not necessary to read the files (will speed up things), we're only after their paths:
+  var sources = gulp.src(['./src/alipayActive/js/*.js', './src/alipayActive/css/*.css'], {
+    read: false
+  });
+
+  return target.pipe(inject(sources))
+    .pipe(gulp.dest('./dist'));
+
+})
+
+// html文件处理
+gulp.task('testHtml', function () {
+  var options = {
+    removeComments: true,  //清除注释
+    collapseWhitespace: false,  //压缩html
+    collapseBooleanAttributes: true, //省略布尔属性的值
+    removeEmptyAttributes: true,  //删除所有空格作为属性值
+    removeScriptTypeAttributes: true,  //删除script的type属性
+    removeStyleLinkTypeAttributes: true,  //删除style的type属性
+    minifyJS: false,  //压缩js
+    minifyCSS: true  //压缩css
+  }
+  gulp.src(htmlSource)
+    .pipe(htmlmin(options))
+    .pipe(rev())
+    .pipe(gulp.dest(htmlTarget))
+})
+
+// 压缩js
+gulp.task('compress', function (cb) {
+  gulp.src(jsSource)
+    // .pipe(concat('main.js'))    //合并js
+    // .pipe(rename({ suffix: '.min' }))
+    // .pipe(gulp.dest(jsTarget))
+    .pipe(babel())
+    // // 方案一
+    .pipe(minify({
+      ext: {
+        src: '.js',
+        min: '.min.js'
+      },
+      exclude: ['tasks'],
+      ignoreFiles: ['.combo.js', '.min.js']
+    }))
+    .pipe(gulp.dest(jsTarget))
+    .pipe(notify({ message: 'js is complite!' }))
+})
+
+// 压缩css,加前缀
+/*!
+   保留注释的格式
+*/
+
+gulp.task('stylus', function () {
+  gulp.src(stylusSource)
+    .pipe(stylus())
+    .pipe(gulp.dest(stylusTarget))
+    .pipe(connect.reload());
+});
+
+gulp.task('minicss', function () {
+  var opt = {
+    advanced: true,   //是否开启高级优化，合并选择器啥的
+    keepSpecialComments: "*",  //保留所有特殊前缀
+    keepBreaks: false,   //是否保留换行
+    removeEmpty: false,  // 是否删除空格
+    compatibility: "*"   //启用兼容模式，’*‘是ie9以下，’ie7‘，’ie8‘可选   
+  }
+  gulp.src(cssSource)
+    .pipe(autoPrefixer({
+      browsers: ['last 2 versions'],  //兼容的限度
+      cascade: true  //是否美化属性值
+    }))
+    .pipe(gulp.dest(cssTarget))
+    .pipe(minifyCSS(opt))
+    .pipe(rename({ suffix: '.min' }))
+    .pipe(gulp.dest(cssTarget))
+    .pipe(notify({ message: 'css is complete!' }))
+})
+
+// 压缩包
+gulp.task('zip', () => {
+  gulp.src('src/*')
+    .pipe(zip('project.zip'))
+    .pipe(gulp.dest(htmlTarget))
+})
+
+// 图片压缩
+gulp.task('testImagemin', function () {
+  // 将你默认的任务代码放在这
+  var opt = {
+    optimizationLevel: 3, //优化等级
+    progressive: false,    //无损压缩
+    interlaced: false,     //隔行扫描gif渲染
+    multipass: false,      //多次优化svg，直到完全优化
+    use: [pngquant()]     //使用pngquant深度压缩
+  }
+  gulp.src(imgSource)
+    .pipe(imagemin(opt))
+    .pipe(gulp.dest(imgTarget))
+    .pipe(notify({ message: 'image is complete!' }))
+})
+
+// 清除
+gulp.task('clean', function () {
+  return gulp.src([htmlTarget, cssTarget, jsTarget, imgTarget], { read: false })
+    .pipe(clean())
+})
+
+// 监控
+gulp.task('watch', function () {
+  gulp.watch(htmlSource, ['html'])
+  gulp.watch(stylusSource, ['stylus'])
+  gulp.watch(jsSource, ['html'])
+})
+// 服务器
+gulp.task('connect', function () {
+  var serverConfig = {
+    root: serverPort,    //从哪个目录开启server
+    port: 8080,          //将服务开启在哪个端口
+    livereload: true
+  }
+  connect.server(serverConfig)
+})
+gulp.task('html', function () {
+  gulp.src(htmlSource)
+    .pipe(connect.reload());
+});
+
+// *执行命令*
+gulp.task("watching", ['connect', 'watch']);
+
+gulp.task("default", function (cb) {
+  runSequence(
+    'clean',
+    ['testHtml', 'compress', 'minicss', 'testImagemin'],
+    cb
+  )
+})
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1fd7f22
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "gulp-demo",
+  "version": "1.0.0",
+  "description": "",
+  "main": "gulpfile.js",
+  "scripts": {
+    "start": "gulp watching"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j710328466/gulp-demo.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/j710328466/gulp-demo/issues"
+  },
+  "homepage": "https://github.com/j710328466/gulp-demo#readme",
+  "dependencies": {
+    "gulp": "^3.9.1",
+    "gulp-connect": "^5.5.0",
+    "gulp-watch": "^5.0.0"
+  }
+}