gulp构建工具的基本使用
gulp是前端自动化打包构建工具,基于流格式的打包构建工具 官网:
安装:
- node环境
- gulp: 全局安装:
npm install gulp -g
局部安装:
npm install gulp --save-dev
准备工作
1.gulpfile.js 2.初始化 package.json (npm init) 常用插件
-
gulp-concat : 合并文件(js/css) gulp-uglify : 压缩js文件 gulp-rename : 文件重命名 gulp-less : 编译less gulp-clean-css : 压缩css gulp-livereload : 实时自动编译更新
重要api
-
gulp.src(filePath) 指向指定路径得文件夹 gulp.dest(dirPath) 指向所有文件夹,用于输出文件 gulp.task(name,[deps],fn) 定义一个任务 gulp.watch() 监视文件变化
使用: 引入插件
var gulp = require(gulp) // var $ = require(gulp-load-plugins)() 使用这个下面的插件可改为$.xx // 引入插件 var concat = require(gulp-concat) var rename = require(gulp-rename) var uglify = require(gulp-uglify) var cssClean = require(gulp-clean-css) var livereload = require(gulp-livereload) var connect = require(gulp-connect)
处理js任务
gulp.task(js,function(){ return gulp.src(js/*.js) //找到目标文件,将数据读取到gulp的内存中 .pipe(concat(build.js)) //临时合并文件 .pipe(gulp.dest(dist/js/)) //输出文件到本地 .pipe(uglify()) .pipe(rename({ suffix:.min})) .pipe(gulp.dest(dist/js)) .pipe(livereload()) })
css任务
gulp.task(cssMin,function(){ return gulp.src(css/*.css) .pipe(cssClean()) .pipe(gulp.dest(dist/css)) .pipe(livereload()) })
监视任务
gulp.task("watch",function(){ livereload.listen(); gulp.watch(js/*.js,gulp.series(js)) gulp.watch(css/*.css,gulp.series(cssMin)) })
实时更新页面
gulp.task("server",function(){ connect.server({ root:dist/, livereload:true, port:5000 }) gulp.watch(js/*.js,gulp.series(js)) gulp.watch(css/*.css,gulp.series(cssMin)) })
默认任务
gulp.task(default,gulp.series(gulp.parallel(js,cssMin,........)));
重点编译ts=>es5
tsconfig.json ts编译配置文件
gulpfile.js
var ts = require(gulp-typescript) var tsConfig = ts.createProject(tsconfig.json) var webpack = require(webpack-stream) var named = require(vinyl-named)
第一步,编译ts
gulp.task(compileTs,function(){ // 任务操作 return tsConfig.src() .pipe(tsConfig()) .js.pipe($.babel({ presets:[env] })) .pipe(gulp.dest("js")) .pipe($.livereload()) })
第二步,转js,其实第一步已经转了,这一步主要处理模块化编译,import/export,箭头函数等等
gulp.task("toJs",function(){ return gulp.src("js/*.js") .pipe(named()) .pipe(webpack({ // production development mode: "production", devtool:"source-map", output: { // 告诉webpack不使用箭头 environment: { arrowFunction: false, const: false } }, })) .pipe(gulp.dest(weige)) .pipe($.livereload()) })
编译后代码: 使用感想:语法比较简单,性能好,总体来说比grunt更香