一步步了解前端自动化部署的简单实践

2023-10-11 08:30:31

前言

在最近交付的多端小项目中，为了减少部署的动静，我研究了前端自动化部署方案。经过调研，我发现了两套可行的方案，现在就来分享给大家。

方案一：使用 Node.js + Gulp

1. 安装 Gulp

npm install --save-dev gulp

2. 创建 Gulpfile.js 文件

var gulp = require('gulp');
var clean = require('gulp-clean');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');

gulp.task('clean', function () {
  return gulp.src('dist/*')
    .pipe(clean());
});

gulp.task('scripts', function () {
  return gulp.src('src/*.js')
    .pipe(uglify())
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('dist/js'));
});

gulp.task('styles', function () {
  return gulp.src('src/*.css')
    .pipe(rename({ suffix: '.min' }))
    .pipe(gulp.dest('dist/css'));
});

gulp.task('default', ['clean', 'scripts', 'styles']);

3. 运行 Gulp 任务

gulp

方案二：使用 Node.js + Grunt

1. 安装 Grunt

npm install --save-dev grunt

2. 创建 Gruntfile.js 文件

module.exports = function (grunt) {
  grunt.initConfig({
    clean: {
      dist: ['dist/*']
    },
    uglify: {
      scripts: {
        files: {
          'dist/js/main.min.js': 'src/js/main.js'
        }
      }
    },
    cssmin: {
      styles: {
        files: {
          'dist/css/main.min.css': 'src/css/main.css'
        }
      }
    },
    watch: {
      scripts: {
        files: ['src/js/*.js'],
        tasks: ['uglify']
      },
      styles: {
        files: ['src/css/*.css'],
        tasks: ['cssmin']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['clean', 'uglify', 'cssmin']);
  grunt.registerTask('dev', ['watch']);
};