gulp编译

最新推荐文章于 2023-04-14 10:24:34 发布
最新推荐文章于 2023-04-14 10:24:34 发布
阅读量567 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 打包 文章标签： gulp编译
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_36703936/article/details/73346939
本文主要介绍如何利用gulp工具来编译less和sass文件，帮助开发者将预处理器语言转换为CSS，提升前端开发效率。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1，nodejs环境
2，全局方式安装gulp  npm install -g gulp
3，全局安装gulp后，还需要在每个要使用gulp的项目中都单独安装一次
3，如果想在安装的时候把gulp写进项目package.json文件的依赖中，则可以加上--save-dev： npm install --save-dev gulp
4,npm国内墙的问题,建议使用cnpm替代,输入:npm install -g cnpm --registry=http://registry.npm.taobao.org在npm下安装cnpm,然后以后需要用到npm指令安装用cnpm指令替代能解决大部分无法获取的镜像
5, 1:gulp-rename 重命名 npm install --save-dev gulp-rename 
    2:gulp-uglify js文件压缩 npm install --save-dev gulp-uglify
    3:gulp-minify-csscss文件压缩npm install --save-dev gulp-minify-css
    4:gulp-minify-htmlhtml文件压缩npm install --save-dev gulp-minify-html
    5:gulp-less
less和sass的编译
npm install --save-dev gulp-less

// 引入gulp
var gulp   = require('gulp');
// 引入组件
var jshint = require('gulp-jshint');
var sass   = require('gulp-sass');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var minifyCss = require('gulp-minify-css');
var fs  = require('fs');
var replace = require('gulp-replace');
var htmlmin = require('gulp-htmlmin');
// var elixir = require('laravel-elixir');

// 压缩html，清除注释代码
gulp.task('html', function() {
    var htmlSrc = 'resources/assets/home/',
        htmlDist = 'public/home/';

    // 参数说明：http://www.jb51.net/article/85973.htm
    var isFormat = true;
    var options = {
        collapseWhitespace: isFormat,
        collapseBooleanAttributes: isFormat,
        removeComments: isFormat,
        removeEmptyAttributes: isFormat,
        removeScriptTypeAttributes: isFormat,
        removeStyleLinkTypeAttributes: isFormat,
        minifyJS: isFormat,
        minifyCSS: isFormat
    };

    var htmlBaseSrc  = 'resources/assets/home/',
        htmlBasePos  = '*.html',
        htmlBaseDist = 'public/home/';
    // 'community/',
    var htmlPosArr  = ['','bjc/','wxr/','academy/','community/','activity/','bond/','future/','guestActivity/','LkGroup/','register/','standardTail/','task/design/','task/lightTask/','task/publish/','user/','user/company/','user/designer/','user/person/','works/'];
    var htmlLen = htmlPosArr.length;

    for(var i=0; i < htmlLen; i++) {
        gulp.src(htmlBaseSrc+htmlPosArr[i]+htmlBasePos).pipe(htmlmin(options)).pipe(gulp.dest(htmlBaseDist+htmlPosArr[i]));
    }
});

// 编译sass并压缩
gulp.task('sass', function () {

    var cssBaseSrc = 'resources/assets/sass/',
        cssBaseDist = 'public/css/';

    var cssSrcArr = [['*.scss', ''], ['wxRegistScss/*.scss', 'wxRegistScss']],
        cssArrLen = cssSrcArr.length;

    for(var i=0; i < cssArrLen; i++) {

        gulp.src(cssBaseSrc+cssSrcArr[i][0]).pipe(sass()).pipe(minifyCss()).pipe(gulp.dest(cssBaseDist+cssSrcArr[i][1]));

    }

});

// 合并、压缩js文件
gulp.task('js', function() {
    var jsBaseSrc = 'resources/assets/js/',
        jsBaseDist = 'public/js/';
    // ['pay/*.js', 'pay'] , ['base/*.js', 'base']
    var jsSrcArr = [['*.js', ''],['util/*.js', 'util'],['base/*.js',"base"],['wxRegistJs/*.js','wxRegistJs']],
        jsArrLen = jsSrcArr.length;
    var config = {
        mangle: {except: ['define', 'require', 'exports', 'module', '$']},
        compress: true
    };
    /*gulp.src(jsSrc).pipe(concat('all.js')).pipe(gulp.dest(jsDist)).pipe(rename('all.min.js')).pipe(uglify(config)).pipe(gulp.dest(jsDist));*/
    for(var i=0; i < jsArrLen; i++) {
        gulp.src(jsBaseSrc+jsSrcArr[i][0]).pipe(gulp.dest(jsBaseDist+jsSrcArr[i][1]));
    }

    // gulp.src(jsSrc).pipe(gulp.dest(jsDist));
});

// 公共头部、尾部
gulp.task('hfooter', function() {

    var htmlBaseDir = 'resources/assets/home/';
    var replaceArr = ['', 'bond/', 'works/', 'task/design/','task/lightTask/', 'task/publish/', 'future/', 'guestActivity/', 'standardTail/', 'activity/', 'community/'];
    var replaceLen = replaceArr.length;

    for(var i=0; i < replaceLen; i++) {
        (function(i) {
            var htmlDir = htmlBaseDir+replaceArr[i];
            fs.readdir(htmlDir, function(err, files) {
                if (err) {
                    console.log(err);
                } else {
                    files.forEach(function(f) {
                        if (f !== 'head.html' && f !== 'footer.html') {
                            gulp.src(htmlDir + f)
                                .pipe(replace(/<!--header-->[\s\S]*<!--headerend-->/, '<!--header-->\n' + fs.readFileSync(htmlBaseDir + 'head.html', 'utf-8') + '\n<!--headerend-->'))
                                .pipe(replace(/<!--footer-->[\s\S]*<!--footerend-->/, '<!--footer-->\n' + fs.readFileSync(htmlBaseDir + 'footer.html', 'utf-8') + '\n<!--footerend-->'))
                                .pipe(replace(/<!--baidu_begin-->[\s\S]*<!--baidu_end-->/, fs.readFileSync(htmlBaseDir + 'baidu.js.html', 'utf-8')))
                                .pipe(gulp.dest(htmlDir))
                        }
                    });
                }
            });
        })(i);
    }


    // var htmlDirC = 'resources/assets/home/community/';
    // var replaceDirC = 'resources/assets/home/';
    // fs.readdir(htmlDirC, function(err, files) {
    //     if (err) {
    //         console.log(err);
    //     } else {
    //         files.forEach(function(f) {
    //             if (f !== 'head.html' && f !== 'footer.html') {
    //                 gulp.src(htmlDirC + f)
    //                     .pipe(replace(/<!--header-->[\s\S]*<!--headerend-->/, '<!--header-->\n' + fs.readFileSync(htmlDirC + 'head.html', 'utf-8') + '\n<!--headerend-->'))
    //                     .pipe(replace(/<!--footer-->[\s\S]*<!--footerend-->/, '<!--footer-->\n' + fs.readFileSync(replaceDirC + 'footer.html', 'utf-8') + '\n<!--footerend-->'))
    //                     .pipe(replace(/<!--baidu_begin-->[\s\S]*<!--baidu_end-->/, fs.readFileSync(replaceDirC + 'baidu.js.html', 'utf-8')))
    //                     .pipe(gulp.dest(htmlDirC))
    //             }
    //         });
    //     }
    // });

  
    var htmlDir = 'resources/assets/home/academy/';
    var replaceDir = 'resources/assets/home/';
    fs.readdir(htmlDir, function(err, files) {
        if (err) {
            console.log(err);
        } else {
            files.forEach(function(f) {
                if (f !== 'head.html' && f !== 'footer.html') {
                    gulp.src(htmlDir + f)
                        .pipe(replace(/<!--header-->[\s\S]*<!--headerend-->/, '<!--header-->\n' + fs.readFileSync(htmlDir + 'head.html', 'utf-8') + '\n<!--headerend-->'))
                        .pipe(replace(/<!--footer-->[\s\S]*<!--footerend-->/, '<!--footer-->\n' + fs.readFileSync(replaceDir + 'footer.html', 'utf-8') + '\n<!--footerend-->'))
                        .pipe(gulp.dest(htmlDir))
                }
            });
        }
    });

    // 个人中心 （企业、设计师、普通用户）
    var userDirArr = [['user/designer/', 'userHead.html'],['user/person/', 'userHeadP.html'],['user/company/', 'userHeadC.html']];
    var userLen = userDirArr.length;

    for(var i=0; i < userLen; i++) {
        (function(i) {
            var htmlDir = htmlBaseDir + userDirArr[i][0];
            fs.readdir(htmlDir, function(err, files) {
                if (err) {
                    console.log(err);
                } else {
                    files.forEach(function(f) {
                        if (f !== userDirArr[i][1] && f !== 'footer.html') {
                            gulp.src(htmlDir + f)
                                .pipe(replace(/<!--header-->[\s\S]*<!--headerend-->/, '<!--header-->\n' + fs.readFileSync(htmlBaseDir + userDirArr[i][1], 'utf-8') + '\n<!--headerend-->'))
                                .pipe(replace(/<!--footer-->[\s\S]*<!--footerend-->/, '<!--footer-->\n' + fs.readFileSync(htmlBaseDir + 'footer.html', 'utf-8') + '\n<!--footerend-->'))
                                .pipe(replace(/<!--baidu_begin-->[\s\S]*<!--baidu_end-->/, fs.readFileSync(htmlBaseDir + 'baidu.js.html', 'utf-8')))
                                .pipe(gulp.dest(htmlDir))
                        }
                    });
                }
            });
        })(i);
    }

    /* setTimeout(function() {
     gulp.run('html');
     },3000); */
});

gulp.task('watch', function() {

    gulp.watch(['resources/assets/sass/fag.scss', 'resources/assets/js/fag.js'], function() {
        gulp.run('signle');
    });

    gulp.run('signle');

});


gulp.task('signle', function() {

    /**
     * @type CSS
     */
    var cssBaseSrc = 'resources/assets/sass/',
        cssBaseDist = 'public/css/';

    var cssSrcArr = [['fag.scss', '']],
        cssArrLen = cssSrcArr.length;

    for(var i=0; i < cssArrLen; i++) {

        gulp.src(cssBaseSrc+cssSrcArr[i][0]).pipe(sass()).pipe(minifyCss()).pipe(gulp.dest(cssBaseDist+cssSrcArr[i][1]));
    }


    /**
     * @type html
     */
    var htmlBaseSrc  = 'resources/assets/home/',
        htmlBasePos  = '*.html',
        htmlBaseDist = 'public/home/';

    var htmlPosArr  = ['standardTail/'];
    var htmlLen = htmlPosArr.length;
    for(var i=0; i < htmlLen; i++) {
        gulp.src(htmlBaseSrc+htmlPosArr[i]+htmlBasePos).pipe(gulp.dest(htmlBaseDist+htmlPosArr[i]));
    }


    /**
     * @type js
     */
    var jsBaseSrc = 'resources/assets/js/',
        jsBaseDist = 'public/js/';
    var jsSrcArr = [['fag.js','']],
        jsArrLen = jsSrcArr.length;
    var config = {
        mangle: {except: ['define', 'require', 'exports', 'module', '$']},
        compress: true
    };

    for(var i=0; i < jsArrLen; i++) {
        gulp.src(jsBaseSrc+jsSrcArr[i][0]).pipe(gulp.dest(jsBaseDist+jsSrcArr[i][1]));
    }


});


gulp.task('default', function() {

    gulp.run('watch');
});
gulpfile 编译运行_Gulp入门教程
weixin_28841265的博客
12-23 549
###Gulp介绍* 中文主页: http://www.gulpjs.com.cn/* gulp是与webpack功能类似的**前端项目构建**工具, 也是基于Nodejs的自动**任务运行器*** 能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的合并、压缩、检查、监听文件变化、浏览器自动刷新、测试等任务* gulp更高效(异步多任务)...
gulpfile 编译运行_整理笔记：前端工程构建工具gulp篇
weixin_32058931的博客
01-14 486
gulp ,基于 NodeJS 的项目，自动化构建的工具增强你的工作流程！一、工作原理前端构建工具，gulp是基于Nodejs，自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。借鉴了Unix操作系统的管道(pipe)思想，前一级的输出，直接...
gulp编译gulp编译文件、gulp编译项目
12-29
gulp编译文件、gulp编译项目
gulp 自动编译
weixin_47818467的博客
06-25 453
配置 import yargs from 'yargs'; const args=yargs // 区分运行环境 .option('production',{ boolean:true, default:false, describe:'描述' }) .option('watch',{ boolean:true, default:false, describe:'watch all files' }) //日志 .option('verbose',{ boolean:true,.
使用gulp 把源码编译
qq_34510843的博客
04-14 216
在项目根目录下执行，打包后的输出文件在out目录下。
gulp-bd-cache:对gulp编译过的文件进行缓存，避免多余的编译
05-24
该插件利用的是文件修改后的mtime属性，并未实际存储文件，所以使用的时候需要注意 两次编译期间不要清空目标文件夹 安装 npm i gulp-bd-cache -D 使用 /** * 对目标目录作缓存，存在更改时才编译 * @param {...
gulp-twing：使用Gulp编译Twig模板。 建立在牵引
02-03
用编译模板。 建立在。 需要 ≥6.0.0 安装 npm install twing gulp-twing --save 用法 var twing = require('gulp-twing'); twing（env，data = {}，options = {}） 返回一个需要输入文件名的对象转换流。 环保...
gulp-dotjs-packer:用 gulp 编译 doTjs (gulpjs.com)
06-02
用 gulp 编译 (gulpjs.com) 信息 包裹 gulp-dotjs-packer 描述 Gulp 的 doTjs 编译器 吞咽版 3.x 用法 var gulp = require ( "gulp" ) ; var dotPacker = require ( "gulp-dotjs-packer" ) ; gulp . task ( 'dot'...
html-sass-gulp:模板用gulp编译Sass
05-04
4. **运行Gulp任务**：在命令行中输入`gulp sass`或`npx gulp sass`，Gulp将自动监视源文件的变化，并在有任何更改时重新编译Sass。 5. **实时刷新**：为了实现开发过程中浏览器的实时刷新，可以使用Gulp的其他插件...
gulp
zhxpingmiss码农文档
06-01 315
1、安装bower npm install -g bower 2、创建项目文件夹 angularProject 3、初始化项目 npm init #配置package.json文件 bower init #新建bower.json4、安装其他项目依赖    #其他项目依赖也用此命令安装，这些依赖将自动安装到bower_component文件夹下，在代码中引入制定的位置即可 #安装时使用--sa...
前端开发人员构建过程使用最新的工具gulp来让你启动并运行
08-10
前端开发人员构建过程,使用最新的工具gulp来让你启动并运行。可以使用它作为你自己构建过程的样板或教程。
gulp编译文件基本操作集囊
loong的博客
04-18 1942
一、简介        gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不尽能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不尽可以很愉快的编写代码，而且大大提高我们的工作效率。        gulp是基于node.js的自动任务运行器，她能自动化地完成JavaScript/coffee/sass/less/html/image...
gulp页面模板编译
10-20 299
首先要安装gulp yarn add gulp --dev 根据需要安装的一些gulp的常用插件 压缩css代码的转换流插件 yarn add gulp-clean-css --dev babel的插件 yarn add gulp-babel @babel/core @babel/preset-env --dev 模板引擎插件 yarn add gulp-rename --dev 在根目录下面创建一个gulpfile.js的文件，代码如下 const {src,dest,par
Gulp安装、编译、合并、压缩
ChibiMarukoChan的博客
11-02 584
准备工作 前提是先安装node和npm（淘宝的cnpm） http://npm.taobao.org/ 安装gulp npm install -g cnpm--registry=http://npm.taobao.org/ npm install --global gulp //局部安装 npm install gulp --save-dev 安装完成的话，gulp模块下载到项目中的...
工程化-gulp简单使用实现自动化编译
weixin_43756060的博客
06-19 514
初始化项目 创建gulps空文件夹 进入文件夹执行npm init -y 初始化node项目 执行yarn add gulp -D 安装完成修改package.json "scripts": { "build": "gulp" }, 执行npx gulp --version查看版本 npm run build 执行gulp 配置gulp的任务 1. 初始化 在根目录下创建gulpfile.js文件 // 压缩、混淆js function js () { } // 对scss/les
本地编译 gulp 项目
雾里看花叹朦胧
10-27 859
1、安装nodewindow下，下载node安装即可，以支持 npm 指令。 node下载地址：http://nodejs.cn/download/ 安装比较简单，基本一直下一步即可，安装路径随意。 安装完成后，终端输入如下命令 显示版本号即安装成功。 node -v查看 npm 版本： npm -v查看 npm 所使用的库： npm config get registry 如果返回的结果
gulpfile 编译运行_玩转gulp之gulp编译less
weixin_35401836的博客
12-23 129
用好gulp grunt webpack让前端编程走向自动化，是作为一个前端开发必须学会的技能，不然逼格怎么提升的上去呢。。。然后教大家如何用gulp装逼。一点点的学，都是相通的嘛1. 安装node2.安装npm3.安装cnpm4.安装全局gulp5.cnpm init建立package.json6.添加依赖dependence gulp和gulp-less7. cnpm install...
一篇迟到的gulp文章，代码合并压缩，less编译
angyangan9569的博客
05-05 598
前言 这篇文章本应该在去年17年写的，但因为种种原因没有写，其实主要是因为懒（捂脸）。gulp出来的时间已经很早了，16年的时候还很流行，到17年就被webpack 碾压下去了，不过由于本人接触gulp的时候比较晚，16年的时候才听说有这么个玩意，正真用它是在17年的时候，但是虽然现在webpack已经大行其道，我们每个人都 在积极去拥抱它，不过gulp在现在来说也并不是一无是处，还是有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值