javascript: nodejs中gulp的用法
在node中提供了一个好用的工具npm,可以用来下载各个包
在node中下载依赖包,
然后新建一个gulpFile.js文件,将代码写入这个文件中就可以运行了
/*
gulp
下载依赖:
npm i -g gulp
npm i -D gulp
*/
const gulp = require("gulp");
/*
css
下载依赖:
npm i -D gulp-cssmin
npm i -D gulp-autoprefixer
*/
const cssmin = require("gulp-cssmin");
const autoprefixer = require("gulp-autoprefixer");//自动添加css浏览器前缀
/*
sass
下载依赖:
npm i -D sass
npm i -D gulp-sass
*/
const sass = require("gulp-sass")(require("sass"));
/*
js
下载依赖:
npm i -D gulp-uglify
npm i -D gulp-babel@7.0.1
npm i -D babel-core
npm i -D babel-preset-es2015
*/
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
/*
html
下载依赖:
npm i -D gulp-htmlmin
*/
const htmlmin = require("gulp-htmlmin");
/*
清除dist文件夹
下载依赖:
npm i -D gulp-clean
*/
const clean = require("gulp-clean");
/*
自动打开浏览器
下载依赖:
npm i -D gulp-webserver
*/
const webserver = require("gulp-webserver");
/* 创建css任务 */
gulp.task("css",()=>{
return gulp
.src("./src/css/**")
.pipe(autoprefixer({ overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]}))
.pipe(cssmin())
.pipe(gulp.dest("./dist/css"));
});
/* 创建sass任务 */
gulp.task("sass",()=>{
return gulp
.src("./src/sass/**")
.pipe(sass())
.pipe(autoprefixer({ overrideBrowserslist:["last 5 version","iOS > 3","Firefox > 2"]}))
.pipe(cssmin())
.pipe(gulp.dest("./dist/css"));
})
/* 创建js任务 */
gulp.task("js",()=>{
return gulp
.src("./src/js/**")
.pipe(babel({presets:["es2015"]}))
.pipe(uglify())
.pipe(gulp.dest("./dist/js"))
})
/* 创建html任务 */
gulp.task("html",()=>{
return gulp
.src("./src/html/**")
.pipe(htmlmin({
removeEmptyAttributes:true, // 移除空书序属性
collapseWhitespace:true, // 移除空白
minifyJS:true, // 压缩页面中的js
minifyCSS:true // 压缩页面中的css
}))
.pipe(gulp.dest("./dist/html"));
});
/* 创建lib任务 */
gulp.task("lib",()=>{
return gulp
.src("./src/lib/**")
.pipe(gulp.dest("./dist/lib"));
})
/* 创建static任务 */
gulp.task("static",()=>{
return gulp
.src("./src/static/**")
.pipe(gulp.dest("./dist/static"));
})
/* 创建clean任务 */
gulp.task("clean",()=>{
return gulp
.src("./dist")
.pipe(clean())
})
/* 创建webserver任务 */
gulp.task("webserver",()=>{
return gulp
.src("./dist")
.pipe(webserver({
host: "127.0.0.1", //主机名
port: "8090",
open: "./html/index.html", //打开默认的首页
livereload: true, //自动刷新
proxies: [
//配置代理
//一个对象就是一个代理
{
source: "/123", //设置本机访问的路径
target: "http://localhost:80/test/login.php"
}
]
}))
})
// 创建自定义的watch任务,监视每一个文件夹中的变化及对应要执行的任务
gulp.task("watch",(cb)=>{
// 监视的文件夹及要执行的任务
gulp.watch("./src/css/**",gulp.series("css"));
gulp.watch("./src/sass/**",gulp.series("sass"));
gulp.watch("./src/js/**",gulp.series("js"));
gulp.watch("./src/html/**",gulp.series("html"));
gulp.watch("./src/lib/**",gulp.series("lib"));
gulp.watch("./src/static/**",gulp.series("static"));
cb();
})
/* 创建default默认任务 */
//gulp.series(参数); 参数是一个数组,可以将要执行的任务放到这个数组中,会依次执行
gulp.task("default",gulp.series(["clean","css","sass","js","html","lib","static",'webserver',"watch"]));