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'));
// });

你可能感兴趣的:(gulp)