gulp以及相关插件内容

gulp

• 下载gulp第三方模块以及全局下载gulp-cli 工具

npm install gulp
npm install gulp-cli -g

• 功能描述

  • 在项目根目录下建立gulpfile.js文件
  • 重构项目的文件夹结构 src目录放置源代码文件 dist目录放置构建后文件
  • 在gulpfile.js文件中编写任务.
  • 在命令行工具中执行gulp任务

• gulp提供的方法

  • gulp.src(): 获取任务要处理的文件
  • gulp.dest()：输出文件
  • gulp.task()：建立gulp任务
  • gulp.watch()：监控文件的变化

实现代码如下：

const gulp = require('gulp');
  // 使用gulp.task()方法建立任务
 gulp.task('first', () => {
    // 获取要处理的文件
    gulp.src('./src/css/base.css') 
    // 将处理后的文件输出到dist目录
    .pipe(gulp.dest('./dist/css'));
 });

• 关于gulp插件的使用介绍
  • gulp-htmlmin : html文件压缩
  • gulp-csso : 压缩css
  • gulp-babel : JavaScript语法转化
  • gulp-less : less语法转化
  • gulp-uglify : 压缩混淆JavaScript
  • gulp-file-include : 公共文件包含
  • browsersync : 浏览器实时同步

下面为一个压缩一个项目的gulpfile.js代码

(注：名字不能更改，不然运行会有问题的)

// 引用gulp模块
const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const fileinclude = require('gulp-file-include');
const less = require('gulp-less');
const csso = require('gulp-csso');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');

// 使用gulp.task建立任务
gulp.task('first', () => {
    // 1.使用gulp.src获取要处理的文件
    gulp.src('./src/css/base.css')
        .pipe(gulp.dest('dist/css'));
});

// html压缩操作以及抽取共同代码
gulp.task('htmlmin', () => {
    gulp.src('./src/*.html')
    	.pipe(fileinclude())
    	压缩html文件中的代码
		.pipe(htmlmin({ collapseWhitespace: true }))
		.pipe(gulp.dest('dist'));
})

//css代码压缩 以及less语法转换
gulp.task('cssmin', () => {
	// 选择css目录下的所有less文件和css文件
	gulp.src(['./src/css/*.less', './src/css/*.css'])
		// 将less语法转换为css语法
		.pipe(less())
		// 将css代码进行压缩
		.pipe(csso())
		// 将处理的结果进行输出
		.pipe(gulp.dest('dist/css'))
});

// js es6代码转换和js压缩
gulp.task('jsmin', () => {
	gulp.src('./src/js/*.js')
		.pipe(babel({
			// 它可以判断当前代码的运行环境 将代码转换为当前运行环境所支持的代码
            presets: ['@babel/env']
        }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'))
});

// 复制文件夹
gulp.task('copy', () => {

	gulp.src('./src/images/*')
		.pipe(gulp.dest('dist/images'));

	gulp.src('./src/lib/*')
		.pipe(gulp.dest('dist/lib'))
});

// 构建任务，可以将上面的程序依次执行，不需要一个一个的进行执行
gulp.task('default', ['htmlmin', 'cssmin', 'jsmin', 'copy']);