it行业网站模板,做微信公众号页面的网站,手机网站建设的趋势,桂林做旅游网站失败的网站gulp 是一个基于node的自动化打包构建工具#xff0c;前端开发者可以使用它来处理常见任务#xff1a;
创建项目
进入项目 npm init -ynpm i gulp -g #xff08;使用命令 gulp#xff09;npm i gulp -D # 开发依赖#xff08;前端工具都是开发依赖 本地安装 代…gulp 是一个基于node的自动化打包构建工具前端开发者可以使用它来处理常见任务
创建项目
进入项目 npm init -ynpm i gulp -g 使用命令 gulpnpm i gulp -D # 开发依赖前端工具都是开发依赖 本地安装 代码加载模块npm i axios #npm i axios --save 项目依赖-线上项目依赖线上的代码需要用到 比如 axios#dev 开发环境 源代码 - 使用一个工具 gulp把代码进行压缩#test 测试环境#生产环境 线上 cssjshtml 压缩 不需要使用gulp
项目根目录中创建 gulpfile.js
const gulp require(gulp);
gulp.task(tname,function(cb){//任务代码cb()
})
在终端中gulp tnamegulp.task(tname,function(){//任务代码console.log(t1)console.log(t2)// 1-获取对应的文件gulp.src(src/js/*.js) //文件流// 2-管道里 做一个处理 压缩处理 安装插件// .pipe(调用一个插件)// 3-管道存放到另一个地方.pipe(gulp.dest(dist/js))})
安装编译压缩 scss 插件 npm install sass gulp-sass --save-dev
var sass require(gulp-sass)(require(sass))
// 定义一个任务
gulp.task(scss, function (cb) {//任务代码console.log(任务代码scss);gulp.src(./src/scss/**/*.scss)//获取文件.pipe(sass({outputStyle: compressed}).on(error, sass.logError))//通过gulp插件处理文件.pipe(gulp.dest(./src/css))//把处理之后的文件 放到 dist/js下.pipe(gulp.dest(./dist/css))//把处理之后的文件 放到 dist/js下cb()
})gulp.task(w, function (cb) {// 监听路径下scss文件一旦文件有变化执行scss任务// console.log(开始监听scss文件的变化);gulp.watch(./src/scss/**/*.scss, gulp.parallel([scss]));cb()
})
安装压缩 js 插件 npm i gulp-uglify -D在文件中定义任务
var gulp require(gulp);
var uglify require(gulp-uglify);
gulp.task(js, function () {console.log(js任务代码);gulp.src(./src/js/*.js).pipe(uglify()).pipe(gulp.dest(./dist/js));
});在终端中输入 gulp js 执行任务
编译js 高版本js转低版本
npm install --save-dev gulp-babel babel/core babel/preset-env const babel require(gulp-babel);
gulp.task(babel, () gulp.src(src/js/**/*.js).pipe(babel({presets: [babel/env]})).pipe(gulp.dest(dist/js))
);// 压缩js npm install --save-dev gulp-uglifyvar uglify require(gulp-uglify);
gulp.task(compress,function(){// 获取js文件gulp.src(./src/js/**/*.js)// 转译插件 高版本js 转出 es5.pipe(babel({presets: [babel/env]}))// es5代码 压缩.pipe(uglify())// 输出到 dist.pipe(gulp.dest(./dist/js))
})npm install gulp-concat -D
// 合并js
var concat require(gulp-concat);
gulp.task(concat, function (cb) {// 获取要合并的js文件gulp.src(([./src/js/login/login-a.js, ./src/js/login/login-b.js]))// 合并.pipe(concat(login.js))// 输出.pipe(gulp.dest(./src/js))cb()
})npm install gulp-htmlmin -D
//gulp-htmlmin 压缩html
var htmlmin require(gulp-htmlmin);
gulp.task(htmlmin, function() {gulp.src(src/**/*.html)
// 压缩html代码 去掉了 空格和换行.pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest(dist));
})npm install gulp-connect -D
var connect require(gulp-connect);// 刷新任务
gulp.task(reload, function () {gulp.src(./src/**/*.html).pipe(connect.reload());
});gulp.task(w, function (cb) {// 启动一台http服务器connect.server({livereload: true,});// 监听路径下scss文件一旦文件有变化执行scss任务// console.log(开始监听scss文件的变化);gulp.watch(./src/scss/**/*.scss, gulp.parallel([scss]));gulp.watch(src/*.html, gulp.parallel([minify]));gulp.watch(src/js/*.js, gulp.parallel([js]));gulp.watch(src/js/login/*.js, gulp.parallel([concat]));// 监听所有文件的变化gulp.watch(src/**/*.*, gulp.parallel([reload]))cb()
})npm i gulp-imagemin -D
npm i gulp-imagemin7 -D
const imagemin require(gulp-imagemin);
gulp.task(imagemin, function () {gulp.src(src/images/*).pipe(imagemin()).pipe(gulp.dest(dist/images))
})打包任务
gulp.task(build, gulp.series([js, sass, minify]), function () {console.log(项目的构件压缩完毕);})
网址gulp.js - 基于流(stream)的自动化构建工具 | gulp.js中文网
