gulp

gulp

gulp是基于node.js的流式自动化构建工具
https://www.gulpjs.com.cn/

项目构建

1. 新建一个项目根目录
2. 对项目初始化
   • npm i init -y
3. 项目构建
   • 全局安装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语法

引入: var gulp = require(‘gulp’)

1. gulp.src() 用于选择路径
2. gulp.dest() 去到目的地
3. gulp.pipe() 管道 用于运输内容
4. 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'))
})

使用第三方插件

1. 重命名
   • 安装:npm i gulp-rename -D
   • 使用:rename(’’)
2. 压缩html
   • npm install gulp-htmlmin -D
   • htmlmin({ collapseWhitespace: true })
3. 压缩css
   • npm install gulp-cssmin -D
   • cssmin()
4. 压缩js
   • npm install gulp-uglify -D
   • jsmin()
5. 压缩图片
   • npm install gulp-imagemin -D
   • imagemin()
6. 合并文件
   • npm install gulp-concat -D
   • concat(‘all.js’) //合并后的名称
7. less编译
   • npm install gulp-less -D
   • less({
     plugins: [autoprefix]
     })
8. 文件监听

   gulp.task('watchless',function(){
          
   gulp.watch('监听文件路径',gulp.series('执行响应的任务名'))  //监听文件是否改变，一旦改变，执行响应的任务
   })
   

9. 自动构建

   gulp.task('dev',function(){
          
       gulp.watch(['./src/html/*.html','./src/js/*.js','./src/style/*.less'],gulp.series('htmlmin','concat','less','cssmin')  
       //多路径要用数组*******
       //会找到对应的响应去执行，响应数目可以多
   })
   

10. 精灵图
    • 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'));
    });
    

11. 新建项目构建

• 复制旧项目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'));
// });