gulp学习记录

什么是gulp

Gupl.js 是一个自动化构建工具.开发者可以使用它在项目开发过程中自动执行常见任务.gulp.js是基于node.js构建的.利用node.js流的威力,你可以快速构建项目并减少频繁的IO操作.gulp中文网

安装gulp (npm node package manager)

• 打开cmd,输入npm install --global gulp 这是全局安装,会将gulp安装在你的C:\Users\caijiajun\AppData\Roaming\npm这一目录下.并写入系统环境变量.
• 输入npm install --save-dev gulp作为项目的开发依赖安装在你的当前目录.
  全局安装可以通过命令在任何地方调用它,本地安装通过require()调用.

在项目根目录下创建一个gulpfile.js文件,这是gulp的主文件.里面可以定义我们的任务.
cmd 运行 gulp

至此,已经成功安装gulp.js.并拥有一个gulpfile.

gulp的操作都在gulpfile中操作.

const gulp = require('gulp')
gulp.task('default',function(){
    gulp.src()
    .pipe(gulp.dest())
})
gulp.task('default', ()=>{
  gulp.watch('',[]])
})

gulp API

• gulp.src 用来匹配,找到我们的文件
• gulp.dest 指定被gulp处理过的文件存储的位置
• gulp.task gulp创建任务
• gulp.watch

gulp.task('default', ()=>{
  // watch文件可以实时判断文件的变化，当文件变化时，可以去执行指定任务
  // watch内部会监视src下所有的html文件，如果变化，就立即调用 html这个任务
  gulp.watch('./src/*.html',['html'])
})

gulp 插件

• gulp-uglify 用于压缩js文件

gulp.task('script',()=>{
    //src匹配src下所有的js文件
    gulp.src('./src/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./dist'))    
})

• gulp-less 用于将less文件转为css
• gulp-csso 用于压缩css代码
• gulp-concat 用于合并文件

gulp.task('style',()=>{
    gulp.src('./src/css/*.css')
        // 合并匹配到的css文件
        .pipe(concat('all.css'))
        // 压缩css
        .pipe(csso())
        // 加前缀
        .pipe(prefixe())
        // 指定合并的文件的保存路径
        .pipe(gulp.dest('./dist'))
    })
    // 把js单独合在一起
    gulp.src('./src/js/*.js')
        .pipe(uglify())
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./dist'))
    })    

• gulp-antoprefixer 用于css添加前缀,兼容不同浏览器
• gulp-htmlmin 用于压缩html代码

  gulp.task('minify', function() {
    gulp.src('src/*.html')
    .pipe(htmlmin({
        collapseWhitespace: true
        //这里写属性,告诉gulp我们要压缩什么
    }))
    .pipe(gulp.dest('dist'));
});
collapseWhitespace: true,            //压缩html
removeComments: true,                //清除html注释
removeEmptyAttributes: true,         //删除所有空格作为属性值
removeScriptTypeAttributes: true,    //删除type=text/javascript
removeStyleLinkTypeAttributes: true, //删除type=text/css
minifyJS:true,                       //压缩页面js
minifyCSS:true    // 压缩css

• gulp-sourcemaps 生成一个后缀map的文件,文件表明我们的代码是如何被压缩的

gulp.task('myjs', () => {
    // 1.匹配文件
    gulp.src('./src/*.js')
    // 2.调用sourcemaps
    .pipe(sourcemaps.init())
    // 3. 压缩代码
    .pipe(uglify())
    // 3.再调用一下sourcemaps,write方法用来指明要生成的map后缀的文件保存到哪里
    .pipe(sourcemaps.write('./'))// 这里./是相对于 './dist'的
    .pipe(gulp.dest('./dist'))
})