gulp自动化构建

kn
2024-05-20 10:05:30
前端

1.npm init

2.package.json

{
  "name": "baijunyao/thinkphp-bjyadmin",
  "version": "1.0.0",
  "description": "白俊遥博客",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "白俊遥",
    "博客"
  ],
  "author": "baijunyao",
  "license": "Apache2",
  "devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-stage-2": "^6.18.0",
    "browser-sync": "^2.14.0",
    "gulp": "^3.9.1",
    "gulp-babel": "^6.1.2",
    "gulp-cleanhtml": "^1.0.1",
    "gulp-concat": "^2.6.0",
    "gulp-contrib-copy": "^0.1.2",
    "gulp-decomment": "^0.1.3",
    "gulp-imagemin": "^3.0.2",
    "gulp-less": "^3.1.0",
    "gulp-load-plugins": "^1.2.4",
    "gulp-minify-css": "^1.2.4",
    "gulp-plumber": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^2.3.2",
    "gulp-uglify": "^2.0.0"
  }
}

3.guplfile.js

var gulp        = require('gulp'),
    sass        = require('gulp-sass'),
    minifyCss   = require('gulp-minify-css'),
    plumber     = require('gulp-plumber'),
    babel       = require('gulp-babel'),
    uglify      = require('gulp-uglify'),
    clearnHtml  = require("gulp-cleanhtml"),
    imagemin    = require('gulp-imagemin'),
    copy        = require('gulp-contrib-copy'),
    browserSync = require('browser-sync').create(),
    reload      = browserSync.reload;

// 定义源代码的目录和编译压缩后的目录
var src='tpl_src',
    dist='tpl';
// 编译全部scss 并压缩
gulp.task('css', function(){
    gulp.src(src+'/**/*.scss')
        .pipe(sass())
        .pipe(minifyCss())
        .pipe(gulp.dest(dist))
})
// 编译全部js 并压缩
gulp.task('js', function() {
  gulp.src(src+'/**/*.js')
    .pipe(plumber())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest(dist));
});
// 压缩全部html
gulp.task('html', function () {
    gulp.src(src+'/**/*.+(html|tpl)')
    .pipe(clearnHtml())
    .pipe(gulp.dest(dist));
});
// 压缩全部image
gulp.task('image', function () {
    gulp.src([src+'/**/*.+(jpg|jpeg|png|gif|bmp)'])
    .pipe(imagemin())
    .pipe(gulp.dest(dist));
});
// 其他不编译的文件直接copy
gulp.task('copy', function () {
    gulp.src(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html|tpl)')
    .pipe(copy())
    .pipe(gulp.dest(dist));
});
// 自动刷新
gulp.task('server', function() {
    browserSync.init({
        proxy: "tbjyadmin.com", // 指定代理url
        notify: false, // 刷新不弹出提示
    });
    // 监听scss文件编译
    gulp.watch(src+'/**/*.scss', ['css']);
    // 监听其他不编译的文件 有变化直接copy
    gulp.watch(src+'/**/*.!(jpg|jpeg|png|gif|bmp|scss|js|html)', ['copy']);
    // 监听html文件变化后刷新页面
    gulp.watch(src+"/**/*.js", ['js']).on("change", reload);
    // 监听html文件变化后刷新页面
    gulp.watch(src+"/**/*.+(html|tpl)", ['html']).on("change", reload);
    // 监听css文件变化后刷新页面
    gulp.watch(dist+"/**/*.css").on("change", reload);
});
// 监听事件
gulp.task('default', ['css', 'js', 'image', 'html', 'copy', 'server'])

部分配置说明

首先是 require 安装的包；比如说上面安装了 gulp 和 gulp-sass；
gulp. task() 是定义一条任务；
第一个参数是任务的名称；
第二个参数可以是一个闭包函数；
在闭包函数中处理定义的任务；
gulp.src() 中传需要处理的文件名的路径；
gulp.src('css/test.scss') 表示要处理css目录下的test.scss 文件
gulp.src('css/*.scss') 表示要处理css目录下的所有 scss 文件
gulp.src('**/*.scss') 表示要处理所有目录下的所有 scss 文件
gulp.src('**/*.+[scss|sass]') 表示要处理所有目录下的所有 scss 和 sass 文件

pipe() 跟linux中的管道是一个意思；
gulp.src('test.scss').pipe(sass()) 的意思就是把test.scss文件交给sass编译；

gulp.dest() 传入输出的目录；
gulp.dest('css') 表示输出到 css 目录下；
gulp.src('**/*.+(scss|sass)').pipe(sass()).pipe(gulp.dest('css'))；

那接着来讲 watch 监听文件变化后自动处理；

gulp.watch() 第一个参数是文件路径；第二个参数是任务名数组；
gulp.watch('*.scss', ['css']); 监听所有的scss文件；然后调用名为css的任务去处理；

定义个default命令
gulp.task('default', ['css', 'server']) ; 当输入gulp的时候；
先执行 css 任务；然后执行监听任务；

参考 https://baijunyao.com/articles/102

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏