标签：npm src pipe sass nodejs javascript gulp css

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

标签：npm,src,pipe,sass,nodejs,javascript,gulp,css
来源： https://blog.csdn.net/Hr_ving/article/details/120432755

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。