gulp简介:
基于node平台开发的前端构建工具 将机械化操作编写成任务, 简单的说,就是项目准备上线时,用来打包项目的。
有什么作用?
(1)项目上线,HTML、CSS、JS文件压缩合并
(2)语法转换(es6、less ...)
(3)公共文件抽离
(4)修改文件浏览器自动刷新
使用
(1)使用npm install gulp下载gulp库文件
(2)在项目根目录下建立gulpfile.js文件
(3)重构项目的文件夹结构,src目录放置源代码文件,dist目录放置构建后文件
(4)在gulpfile.js文件中编写任务.
(5)在命令行工具中执行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-htmlmin :html文件压缩
-
gulp-csso :压缩css
-
gulp-babel :JavaScript语法转化
-
gulp-less: less语法转化
-
gulp-uglify :压缩混淆JavaScript
-
gulp-file-include 公共文件包含
-
browsersync 浏览器实时同步
注:有关插件用法可在 npmjs.com 查看。