核心提示:gulp简介基于流的代码自动化构建工具,减少重复工作: 预处理语言的编译。 js,css,html压缩混淆。 图片体积优化。常见用法(原生的用法)任务自定义:gulp.task(hello,()={c...
gulp简介
基于流的代码自动化构建工具,减少重复工作:
预处理语言的编译。 js,css,html压缩混淆。 图片体积优化。常见用法(原生的用法)
任务自定义:
gulp.task('hello',()=>{
console.log('hello')
})
默认任务
// 默认执行的任务
gulp.task('default',()=>{
console.log('default')
})
src,dest,pipe
如:gulp.src('./src/**/*.*').pipe(gulp.dest('./dest')),注意:路径和文件的匹配方法。 watch函数
gulp.task('default',()=>{
console.log('default')
gulp.watch('./src/*',['dest'])
})
第三方插件
gulp本身不支持太多功能,大量的功能需要通过第三方插件来提供。
* less编译插件gulp-less
对比webpack安装:npm install gulp-less --save
npm官网
* jade编译gulp-jade
* 合并文件gulp-concat
* 最小化js文件gulo-uglify
* 重命名文件gulp-rename
* 最小化css文件gulp-minify-css
* 压缩htmlgulp-minify-html
* 压缩图像gulp-imagemin
* 创建本地服务器gulp-connect
https://www.npmjs.com/package/gulp-connect
Webpack 中文指南 https://webpack.github.io/