标签：文件浏览器 代码 head css mil ges 运行 结果 实现
Gulp是基于node平台开发的前端构建工具
将机械化操作编写成任务，想要执行机械化操作时执行一个命令行命令任务就能自动执行了
用机器代替手工，提高开发效率
1. Gulp能做什么：
2. Gulp使用：
① 使用npm install gulp下载gulp文件。 注意：库文件都是本地安装，不需要加-g
② 在项目根目录下建立gulpfile.js文件。gulpfile.js文件的名字是gulp要求的，不能随意更改
③ 重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件
④ 在gulpfile.js文件中编写任务
⑤ 在命令行工具中执行gulp任务
3. Gulp中提供的方法：
const gulp = require(‘gulp‘); // 使用gulp.task()方法建立任务 gulp.task(‘first‘, () => { // 获取要处理的文件 gulp.src(‘./src/css/base.css‘) // 将处理后的文件输出到dist目录 .pipe(gulp.dest(‘./dist/css‘)); });
注意：必须要把处理的代码写在.pipe里
如何执行这个任务呢？如果使用node gulpfile.js则执行的是gulpfile.js整个文件。而我们需要执行的是当前这个文件中的first任务，我们可以使用gulp命令来执行这个文件。
下载gulp命令行工具：npm install gulp-cli -g注意不是库文件，需要全局安装
下载完成之后，命令行中多了一个命令：gulp first
4. Gulp插件：
gulp属于轻内核的第三方模块，提供的方法非常少，所有的其他功能都是通过插件的方式实现。
在html中先抽离出公共的代码，然后再引入，gulp中使用@@include引入：
// 引入公共的头部部分 @@include(‘./common/header.html‘);
// 引用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‘); // html任务 // 1. html文件中代码的压缩操作 // 2. 抽取html文件中的公共代码 gulp.task(‘htmlmin‘, () => { // src目录下的所有html文件 gulp.src(‘./src/*.html‘) .pipe(fileinclude()) // 压缩html文件中的代码, collapseWhitespace为是否压缩空格 .pipe(htmlmin({ collapseWhitespace:true })) .pipe(gulp.dest(‘dist‘)); }); // css任务 // 1. less语法转换 // 2. css代码压缩 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任务 // 1. es6代码转换 // 2. 代码压缩 // 安装babel模块：npm install --save gulp-babel @babel/core @babel/preset-env // @babel/core @babel/preset-env是gulp-babel所依赖的模块 gulp.task(‘jsmin‘, () => { gulp.src(‘./src/js/*.js‘) // 将less语法转换为css语法 .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构建任务：
// 构建任务 // 输入命令gulp default，则其他任务也就会自动执行 gulp.task(‘default‘, [‘htmlmin‘, ‘cssmin‘, ‘jsmin‘, ‘copy‘]);
标签：文件浏览器 代码 head css mil ges 运行 结果 实现
原文地址：https://www.cnblogs.com/zcy9838/p/13090205.html
