本文主要是介绍javascript nodejs中gulp的用法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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"]));

这篇关于javascript nodejs中gulp的用法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！