gulp
gulp是基于node.js的流式自动化构建工具
https://www.gulpjs.com.cn/
项目构建
- 新建一个项目根目录
- 对项目初始化
- npm i init -y
- 项目构建
- 全局安装gulp
- npm i gulp-cli -g
- npm i gulp -g
- 安装gulp
- npm i gulp --save-dev
- npm i gulp -D
- 手动创建gulpfile.js文件
- gulp配置文件(编辑gulp语法)
- 运行 gulp 文件名
- 全局安装gulp
gulp语法
引入: var gulp = require(‘gulp’)
- gulp.src() 用于选择路径
- gulp.dest() 去到目的地
- gulp.pipe() 管道 用于运输内容
- gulp.task(‘taskname’,callback) 部署任务
var gulp = require("gulp")
gulp.task('copyhtml',function(){
return gulp
.src(['./src/*.js','!src/js/*.min.js'])
.pipe(gulp.dest('./dist/js'))
})
使用第三方插件
- 重命名
- 安装:npm i gulp-rename -D
- 使用:rename(’’)
- 压缩html
- npm install gulp-htmlmin -D
- htmlmin({ collapseWhitespace: true })
- 压缩css
- npm install gulp-cssmin -D
- cssmin()
- 压缩js
- npm install gulp-uglify -D
- jsmin()
- 压缩图片
- npm install gulp-imagemin -D
- imagemin()
- 合并文件
- npm install gulp-concat -D
- concat(‘all.js’) //合并后的名称
- less编译
- npm install gulp-less -D
- less({
plugins: [autoprefix]
})
- 文件监听
gulp.task('watchless',function(){ gulp.watch('监听文件路径',gulp.series('执行响应的任务名')) //监听文件是否改变,一旦改变,执行响应的任务 })
- 自动构建
gulp.task('dev',function(){ gulp.watch(['./src/html/*.html','./src/js/*.js','./src/style/*.less'],gulp.series('htmlmin','concat','less','cssmin') //多路径要用数组******* //会找到对应的响应去执行,响应数目可以多 })
- 精灵图
- npm install gulp.spritesmith -D
gulp.task('sprite', function () { var spriteData = gulp.src('./src/img/*').pipe(spritesmith({ imgName: 'sprite.png', //生成的图片名称 cssName: 'sprite.css' //生成对应的css文件 })); return spriteData.pipe(gulp.dest('./dist/img')); });
- 新建项目构建
- 复制旧项目package.json到新项目中,更改其中的项目名称,终端运行npm istall
在gulp中,查找源文件时,如果指定的源文件的扩展名有jpg和png两种,用以下写法{jpg,png}
src(‘app/images/*.{jpg,png,JPG,PNG}’)
//完整示例代码
const gulp=require('gulp');
const rename=require('gulp-rename');
const htmlmin=require('gulp-htmlmin');
const cssmin = require('gulp-cssmin');
const jsmin = require('gulp-uglify');
const imagemin=require('gulp-imagemin');
const concat=require('gulp-concat');
const less=require('gulp-less')
const path=require('path')
const spritesmith=require('gulp.spritesmith')
gulp.task('htmlmin',function(){
return gulp
.src('./src/html/*.html')
.pipe(htmlmin({collapseWhitespace:true}))
.pipe(gulp.dest('./dist/html'))
})
gulp.task('cssmin',function(){
return gulp
.src('./src/style/*.css')
.pipe(cssmin())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'))
})
gulp.task('jsmin',function(){
return gulp
.src('./src/js/*.js')
.pipe(jsmin())
.pipe(gulp.dest('./dist/js'))
})
gulp.task('imagemin',function(){
return gulp
.src('src/img/*')
.pipe(imagemin())
.pipe(gulp.dest('dist/img'))
})
gulp.task('concat',function(){
return gulp
.src(['./src/js/index.min.js','./src/js/bootstrap.min.js'])
.pipe(concat('all.js'))
.pipe(jsmin())
.pipe(gulp.dest('dist/js'))
})
gulp.task('less',function(){
return gulp
.src('./src/style/*.less')
.pipe(less({
paths: [ path.join(__dirname, 'src/style') ]
}))
.pipe(gulp.dest('./src/style'))
})
gulp.task('watchless',function(){
gulp.watch('./src/style/*.less',gulp.series('less'))
})
gulp.task('dev',function(){
gulp.watch(['./src/style/*.less','./src/html/*.html','./src/js/*.js'],gulp.series('less','htmlmin','jsmin','cssmin'));
// gulp.watch(['./src/html/*.html','./src/js/*.js','./src/style/*.less'],gulp.series('htmlmin','concat','less'))
})
gulp.task('sprite', function () {
var spriteData = gulp.src('./src/img/*').pipe(spritesmith({
imgName: 'sprite.png',
cssName: 'sprite.css'
}));
return spriteData.pipe(gulp.dest('./dist/img'));
});
// gulp.task('sprite', function() {
// var spriteData = gulp.src('src/img/*').pipe(spritesmith({
// imgName: 'sprite.png',
// cssName: 'sprite.css'
// }));
// return spriteData.pipe(gulp.dest('src/img'));
// });