We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
基于 node 平台开发的前端构建工具,主要用来设定程序自动处理静态资源的工作。
npm install --save-dev gulp
gulpfile.js
function defaultTask(cb) { // place code for your default task here cb(); } exports.default = defaultTask
在项目根目录下执行 gulp 命令:
gulp
如需运行多个任务(task),可以执行 gulp
我们要处理文件的合并、压缩等操作,接口中没有提供,都放在了插件中。
npm install 插件名 --save
// 引用 gulp 模块 const gulp = require('gulp'); // 引用 gulp-htmlmin 插件 const htmlmin = require('gulp-htmlmin'); // 引用 gulp-file-include 插件 const fileinclude = require('gulp-file-include'); // 引用 gulp-less 插件 const less = require('gulp-less'); // 引用 gulp-csso 插件 const csso = require('gulp-csso'); // 引用 gulp-babel 插件 const babel = require('gulp-babel'); // 引用 gulp-uglify 插件 const uglify = require('gulp-uglify'); // 使用 gulp.task() 方法建立任务 // 1.任务的名出 // 2.任务的回调函数 gulp.task('first', () => { console.log('第一个gulp任务'); // 1.使用 gulp.src() 获取要处理的文件 gulp.src('./src/css/base.css') // 2.将处理后的文件输出到 dist/css 目录 .pipe(gulp.dest('./dist/css')); }); // HTML 任务 // 1. html 文件中代码的压缩操作 // 2. 抽取 html 文件中的公共代码 gulp.task('htmlmin', (cb) => { // 使用 gulp.src() 获取 src 目录下的所有 html 文件 gulp.src('./src/*.html') // 抽离公共代码 .pipe(fileinclude()) // 压缩 html 文件中的代码,collapseWhitespace:压缩折叠空格 .pipe(htmlmin({ collapseWhitespace: true })) .pipe(gulp.dest('./dist')); cb(); }); // Css 任务 // 1. less 语法转换 // 2. css 代码压缩 gulp.task('cssmin', (cb) => { // 使用 gulp.src() 获取 css 目录下的所有 less 文件及 css 文件 // gulp.src('./src/css/*.less') gulp.src(['./src/css/*.less', './src/css/*.css']) // 将 less 语法进行转换 .pipe(less()) // 压缩 css 文件中的代码 .pipe(csso()) // 将处理后的文件输出到 dist/css 目录 .pipe(gulp.dest('./dist/css')); cb(); }); // Js 任务 // 1. ES6 代码转换 // 2. js 代码压缩 gulp.task('jsmin', (cb) => { // 使用 gulp.src() 获取 js 目录下的所有 js 文件 gulp.src('./src/js/*.js') // es6 转换 .pipe(babel({ // 它可以判断当前代码的运行环境,将代码转换为当前运行环境所支持的代码 presets: ['@babel/env'] })) // 压缩 js 文件 .pipe(uglify()) .pipe(gulp.dest('./dist/js')) cb(); }); // 复制文件夹 gulp.task('copy', () => { // 使用 gulp.src() 获取 src 目录下的 images 文件夹 return gulp.src('./src/images/*') .pipe(gulp.dest('./dist/images')) // 使用 gulp.src() 获取 src 目录下的 lib 文件夹 return gulp.src('./src/lib/*') .pipe(gulp.dest('./dist/lib')) }); // 构建任务 // 当在命令行执行 default 任务时,会依次执行后面的任务 // gulp.series|4.0 依赖顺序执行 // gulp.parallel|4.0 多个依赖嵌套'html','css','js'并行 gulp.task('default', gulp.series('htmlmin', 'cssmin', 'jsmin', 'copy'));
The text was updated successfully, but these errors were encountered:
No branches or pull requests
gulp介绍
基于 node 平台开发的前端构建工具,主要用来设定程序自动处理静态资源的工作。
gulp使用
安装
npm install --save-dev gulp
创建
gulpfile.js
的文件测试
在项目根目录下执行 gulp 命令:
gulp
Gulp提供的方法
Gulp插件
我们要处理文件的合并、压缩等操作,接口中没有提供,都放在了插件中。
常用插件
示例
参考
The text was updated successfully, but these errors were encountered: