从零构建小程序脚手架

2024-01-03 00:22:39

当我们开发小程序时，往往需要重复地执行一些任务，例如编译Sass文件、压缩图片、生成雪碧图等。为了提高开发效率，我们可以使用构建工具GULP来自动化这些任务。

GULP简介

GULP是一个前端开发工具，它可以帮助我们自动化重复性的任务。GULP使用任务流的方式来执行任务，我们可以通过配置任务流来定义任务的执行顺序。GULP还提供了丰富的插件，我们可以使用这些插件来实现各种各样的任务。

搭建脚手架步骤

1. 安装GULP

npm install -g gulp-cli

2. 创建项目目录

mkdir my-app
cd my-app

3. 初始化项目

npm init -y

4. 安装GULP及其相关插件

npm install gulp gulp-sass gulp-autoprefixer gulp-imagemin gulp-cheerio gulp-svgmin gulp-htmlmin gulp-clean-css gulp-concat gulp-uglify

5. 创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件，并添加以下代码：

const gulp = require('gulp');
const sass = require('gulp-sass');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const cheerio = require('gulp-cheerio');
const svgmin = require('gulp-svgmin');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// 编译Sass文件
gulp.task('sass', function() {
  return gulp.src('src/sass/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(gulp.dest('dist/css'));
});

// 压缩图片
gulp.task('imagemin', function() {
  return gulp.src('src/images/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

// 压缩SVG文件
gulp.task('svgmin', function() {
  return gulp.src('src/svg/*')
    .pipe(svgmin())
    .pipe(gulp.dest('dist/svg'));
});

// 压缩HTML文件
gulp.task('htmlmin', function() {
  return gulp.src('src/*.html')
    .pipe(cheerio({
      run: function($) {
        $('script').each(function() {
          var src = $(this).attr('src');
          if (src) {
            $(this).replaceWith(`<script src="${src}"></script>`);
          }
        });
        $('link').each(function() {
          var href = $(this).attr('href');
          if (href) {
            $(this).replaceWith(`<link href="${href}" rel="stylesheet">`);
          }
        });
      }
    }))
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeAttributeQuotes: true,
      removeComments: true,
      removeEmptyAttributes: true,
      removeTagWhitespace: true,
      minifyCSS: true,
      minifyJS: true
    }))
    .pipe(gulp.dest('dist'));
});

// 压缩CSS文件
gulp.task('cleanCSS', function() {
  return gulp.src('src/css/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('dist/css'));
});

// 合并JS文件
gulp.task('concatJS', function() {
  return gulp.src('src/js/*.js')
    .pipe(concat('all.js'))
    .pipe(gulp.dest('dist/js'));
});

// 压缩JS文件
gulp.task('uglifyJS', function() {
  return gulp.src('dist/js/all.js')
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// 监视文件变化
gulp.task('watch', function() {
  gulp.watch('src/sass/*.scss', ['sass']);
  gulp.watch('src/images/*', ['imagemin']);
  gulp.watch('src/svg/*', ['svgmin']);
  gulp.watch('src/*.html', ['htmlmin']);
  gulp.watch('src/css/*.css', ['cleanCSS']);
  gulp.watch('src/js/*.js', ['concatJS', 'uglifyJS']);
});

// 默认任务
gulp.task('default', ['sass', 'imagemin', 'svgmin', 'htmlmin', 'cleanCSS', 'concatJS', 'uglifyJS', 'watch']);