gulp
1. gulp的安装:
- 定位终端到项目目录 执行 npm install gulp -s 本地安装gulp的库文件
- 执行 npm install gulp-cli -g 全局安装gulp的命令行工具
2. gulp能做什么
- 项目上线,HTML、CSS、JS文件压缩合并
- 语法转换(es6、less …)
- 公共文件抽离
- 修改文件浏览器自动刷新
3. gulp的使用
- 使用npm install gulp下载gulp库文件
- 在项目根目录下建立gulpfile.js文件
- 重构项目的文件夹结构 src目录放置源代码文件 dist目录 放置构建后文件
- 在gulpfile.js文件中编写任务.
- 在命令行工具中执行gulp任务
4. gulp中提供的方法
- gulp.src():获取任务要处理的文件
- gulp.dest():输出文件
- gulp.task():建立gulp任务
- gulp.watch():监控文件的变化
5.gulp的插件:
- gulp-htmlmin:html文件压缩
- gulp-csso:压缩css
- gulp-less:less语法转化
- gulp-babel:JavaScript语法转化(ES6转ES5)
- gulp-uglify:压缩混淆JavaScript
- gulp-file-include:公共文件包含 (解决相同代码重复的问题)
- browsersync:浏览器实时同步
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('first',()=>{
console.log('执行第一个gulp任务')
gulp.src('./src/css/base.css')
.pipe(gulp.dest('dist/css'))
})
gulp.task('htmlmin',()=>{
gulp.src('./src/*.html')
.pipe(fileinclude())
//压缩html文件中的代码
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./dist'))
})
//less转css
//压缩css文件
gulp.task('cssmin', () =>{
gulp.src(['./src/css/*.less','./src/css/*.css'])
.pipe(less())
.pipe(csso())
.pipe(gulp.dest('./dist/css/'));
})
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'])