gulp前端项目快速构建工具

gulp前端项目快速构建工具

1. 安装bower、gulp npm install bower gulp --save-dev -g

2. 拉取代码 git clone https://github.com/yinluobing/gulp-tools

3. 安装依赖包 cd `构建工具目录,例如:(cd gulp-tools)` && npm install

4. 安装前端组件 bower install

5. 添加一个项目 npm run dev 会copy一个模板、目前模板是demo

6. 前端架构是用的requirejs,需要安装前端组件即可

其它都不一一介绍了,自己摸索下.

极简

gulpfile.js

var gulp = require('gulp');
var gulpMinCss = require('gulp-minify-css');
var rename = require('gulp-rename');// 重命名
var gulpLess = require('gulp-less');
var gulpPlumber = require('gulp-plumber');
var gulpImageMin = require('gulp-imagemin');
var gulpUglify = require('gulp-uglify');
var browserSync = require('browser-sync').create();
var gulpAutoPrefix = require('gulp-autoprefixer');
var gulpBabel = require('gulp-babel');
var gulpSourcemaps = require('gulp-sourcemaps');
var gulpStripDebug = require('gulp-strip-debug');
var path = require('path');

var filepath = {
  'less': [
    './admin/css/other/*.less',
    './admin/css/*.less',
  ],
  'js': ['./component/pear/*.js',
    './component/pear/module/*.js',
    '!./component/pear/*.min.js',
    '!./component/pear/module/*.min.js',
    '!./component/pear/module/echarts.js'
  ],
  'config': ['./config/*'],
  'html': [
    './*.html',
    './view/**/*'
  ]
};
var task = {
  /**
   * 编译less文件
   * @param env
   * @param filepath string|array
   */
  less: function (env = 'dev', filepath) {
    switch (env) {
      case 'dev':
        gulp.src(filepath)
          .pipe(gulpSourcemaps.init())
          .pipe(gulpPlumber())
          .pipe(gulpLess())
          .pipe(gulpMinCss({keepSpecialComments: '*' /* 保留所有特殊前缀*/}))
          .pipe(gulpAutoPrefix({
            browsers: ['last 2 versions', 'Android >= 4.0', 'iOS 7', 'last 3 Safari versions'],
            cascade: false
          }))
          .pipe(gulpSourcemaps.write())
          .pipe(rename({suffix: '.min'}))
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
      case 'test':
        gulp.src(filepath)
          .pipe(gulpSourcemaps.init())
          .pipe(gulpPlumber())
          .pipe(gulpLess())
          .pipe(gulpMinCss({keepSpecialComments: '*' /* 保留所有特殊前缀*/}))
          .pipe(gulpAutoPrefix({
            browsers: ['last 2 versions', 'Android >= 4.0', 'iOS 7', 'last 3 Safari versions'],
            cascade: false
          }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulpSourcemaps.write())
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
      case 'pro':
        gulp.src(filepath)
          .pipe(gulpPlumber())
          .pipe(gulpLess())
          .pipe(gulpMinCss({keepSpecialComments: '*' /* 保留所有特殊前缀*/}))
          .pipe(gulpAutoPrefix({
            browsers: ['last 2 versions', 'Android >= 4.0', 'iOS 7', 'last 3 Safari versions'],
            cascade: false
          }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
    }
  },
  js: function (env='dev', filepath) {
    switch (env) {
      case 'dev':
        gulp.src(filepath)
          .pipe(gulpSourcemaps.init())
          .pipe(gulpPlumber())
          .pipe(gulpBabel({
            presets: ['env']
          }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulpSourcemaps.write())
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
      case 'test':
        gulp.src(filepath)
          .pipe(gulpSourcemaps.init())
          .pipe(gulpPlumber())
          .pipe(gulpBabel({
            presets: ['env']
          }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulpSourcemaps.write())
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
      case 'pro':
        gulp.src(filepath)
          .pipe(gulpPlumber())
          .pipe(gulpBabel({
            presets: ['env']
          }))
          .pipe(gulpUglify({
            mangle: true,//类型：Boolean 默认：true 是否修改变量名
            compress: true,//类型：Boolean 默认：true 是否完全压缩
          }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulpStripDebug())
          .pipe(gulp.dest(function (file) {
            return path.dirname(file.path);
          }));
        break;
    }

  },
  img: function (filepath) {
    gulp.src(filepath)
      .pipe(gulpPlumber())
      .pipe(gulpImageMin())
      .pipe(gulp.dest(function (file) {
        return path.dirname(file.path);
      }));
  },
};

// 自动刷新浏览器
gulp.task("bsync", gulp.series((done) => {
  // default task code here
  browserSync.init({
    port: 9000, // 产生随机端口
    server: {
      baseDir: './' // 根地址
    }
  });
  gulp.watch(filepath.less)
    .on('change', function (path, status) {
      task.less('dev', path)
      browserSync.reload();
    });
  gulp.watch(filepath.js)
    .on('change', function (path, status) {
      task.js('dev', path)
      browserSync.reload();
    });
  gulp.watch(filepath.config)
    .on('change', function (path, status) {
      browserSync.reload();
    });
  gulp.watch(filepath.html)
    .on('change', function (path, status) {
      browserSync.reload();
    });
  done();
}));

gulp.task('test', gulp.series((done) => {
  task.less('dev', filepath.less)
  done();
}));

// 定义一键开发模式，开发版
gulp.task('dev', gulp.series("bsync"));

gulp.task('pro', gulp.series((done) => {
  task.js('pro', filepath.js)
  task.less('pro', filepath.less)
  done()
}));

gulp.task('init', gulp.series((done) => {
  task.js('dev', filepath.js)
  task.less('dev', filepath.less)
  done()
}));

package.json

{
  "name": "dev.user.1yun.top",
  "version": "1.0.0",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.14.2",
    "@babel/preset-env": "^7.14.2",
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "browser-sync": "^2.26.14",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^4.1.0",
    "gulp-babel": "^7.0.1",
    "gulp-imagemin": "^7.1.0",
    "gulp-less": "^4.0.1",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.2.1",
    "gulp-rename": "^2.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "gulp-strip-debug": "^4.0.0",
    "gulp-tinypng": "^1.0.2",
    "gulp-uglify": "^3.0.2"
  }
}

文件目录

└── gulp
    ├── gulpfile.js
    ├── package.json