基于NodeJs Gulp配置案例

最新推荐文章于 2023-03-26 21:28:58 发布
最新推荐文章于 2023-03-26 21:28:58 发布
阅读量251 收藏
点赞数
分类专栏： NodeJS Gulp 文章标签： nodejs gulp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Andrew_L/article/details/78476300
版权 
'use strict';

const gulp = require('gulp');
//const jshint = require('jshint');
const $ = require('gulp-load-plugins')();
const del = require('del');
const merge = require('merge-stream');
const runSequence = require('run-sequence');
const amdOptimize = require('amd-optimize');
const argv = require('minimist')(process.argv.slice(2));
const fs = require('fs');

// 设置参数
const RELEASE = !!argv.release;             // 是否在构建时压缩和打包处理
const DEMO = !!argv.demo;                   // 是否在构建Demo环境
const AUTOPREFIXER_BROWSERS = [             // autoprefixer 配置
    'ie >= 10',
    'ie_mob >= 10',
    'ff >= 30',
    'chrome >= 34',
    'safari >= 7',
    'opera >= 23',
    'ios >= 7',
    'android >= 4.4',
    'bb >= 10'
];
console.log('release =', RELEASE);
console.log('demo =', DEMO);

const src = {
    assets: 'assets/**/*',
    images: 'images/**/*',
    pages: 'pages/**/*',
    data: 'data/**/*',
    styles: ['styles/bootstrap.less', 'styles/partials/**/*.{css,less}', 'styles/**/**'],
    scripts: ['scripts/**/*.js', '!scripts/**/*.min.js', 'scripts/**/*.min.js', 'scripts/**/*.json', 'scripts/**/**']
};

const pkgs = require('./package.json').dependencies;

gulp.task('default', ['server'], function () {
    gulp.start('help');
});

// 清除
gulp.task('clean', del.bind(null, ['build/*'], {dot: true}));

// 第三方插件管理
gulp.task('vendor', function () {
    return merge(
        gulp.src('node_modules/jquery/dist/*.*')
            .pipe(gulp.dest('build/js/vendor/jquery')),
        gulp.src('node_modules/bootstrap/dist/js/*.*')
            .pipe(gulp.dest('build/js/vendor/bootstrap'))
    );
});

// 静态资源文件
gulp.task('assets', function () {
    return gulp.src(src.assets)
        .pipe(gulp.dest('build'));
});

// 图片
gulp.task('images', function () {
    return gulp.src(src.images)
        .pipe($.plumber({errorHandler: $.notify.onError('images Error: <%= error.message %>')}))
        //.pipe($.cache($.imagemin({
        //    progressive: true,
        //    interlaced: true
        //})))
        //.pipe($.imagemin({
        //    progressive: true,
        //    interlaced: true
        //}))
        .pipe($.changed('build/images'))
        .pipe(gulp.dest('build/images'));
});

// 字体
gulp.task('fonts', function () {
    return gulp.src('node_modules/bootstrap/fonts/**')
        .pipe(gulp.dest('build/fonts'));
});

// 在线帮助的文件
gulp.task('onlinehelp', function () {
    return gulp.src('onlinehelp/**/*.*')
        .pipe(gulp.dest('build/onlinehelp'));
});

// HTML 页面
gulp.task('pages', function () {
    return gulp.src(src.pages)
        .pipe($.plumber({errorHandler: $.notify.onError('pages Error: <%= error.message %>')}))
        .pipe($.ejs({}, {ext: '.html'}))
        .pipe($.changed('build', {extension: '.html'}))
        .pipe(gulp.dest('build'));
});

// CSS 样式
gulp.task('styles-base', function () {
    return gulp.src('styles/bootstrap.less')
        //return gulp.src(src.styles[0])
        .pipe($.plumber({errorHandler: $.notify.onError('styles Error: <%= error.message %>')}))
        .pipe($.if(!RELEASE, $.sourcemaps.init()))
        .pipe($.less())
        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe($.csscomb())
        .pipe(RELEASE ? $.cssmin() : $.util.noop())
        //.pipe($.cssmin())
        .pipe($.rename('style.css'))
        //.pipe($.if(!RELEASE, $.sourcemaps.write()))
        .pipe($.changed('build/css', {extension: '.less'}))
        .pipe(gulp.dest('build/css'));
});
gulp.task('styles', function () {
    //return gulp.src('styles/bootstrap.less')
    return gulp.src(src.styles[1])
        .pipe($.plumber({errorHandler: $.notify.onError('styles Error: <%= error.message %>')}))
        //.pipe($.if(!RELEASE, $.sourcemaps.init()))
        .pipe($.less())
        .pipe($.autoprefixer(AUTOPREFIXER_BROWSERS))
        .pipe($.csscomb())
        .pipe(RELEASE ? $.cssmin() : $.util.noop())
        //.pipe($.cssmin())
        //.pipe($.rename('style.css'))
        //.pipe($.if(!RELEASE, $.sourcemaps.write()))
        .pipe($.changed('build/css/partials', {extension: '.less'}))
        .pipe(gulp.dest('build/css/partials'));
});

// JavaScript
gulp.task('scripts', function () {
    return gulp.src(src.scripts.slice(0, 1))
        //.pipe(jshint()) // 进行js静态检查
        //.pipe(jshint.reporter('default')) // 对js代码进行报错提示
        .pipe($.plumber({errorHandler: $.notify.onError('scripts Error: <%= error.message %>')}))
        //.pipe($.if(!RELEASE, $.sourcemaps.init()))
        .pipe($.if(RELEASE, $.uglify({mangle: false})))
        //.pipe($.rename({suffix:'.min'}))
        //.pipe($.if(!RELEASE, $.sourcemaps.write()))
        .pipe($.changed('build/js'))
        .pipe(gulp.dest('build/js'));
});
gulp.task('unscripts', function () {
    return gulp.src(src.scripts.slice(2))
        .pipe($.plumber({errorHandler: $.notify.onError('unscripts Error: <%= error.message %>')}))
        //.pipe($.if(!RELEASE, $.sourcemaps.init()))
        //.pipe($.if(RELEASE, $.uglify({ mangle: false })))
        //.pipe($.if(!RELEASE, $.sourcemaps.write()))
        .pipe($.changed('build/js'))
        .pipe(gulp.dest('build/js'));
});

// Build
gulp.task('build', ['clean'], function (cb) {
    if (DEMO) {
        runSequence(['pages', 'assets', 'vendor', 'images', 'fonts', 'styles-base', 'styles', 'unscripts', 'scripts', 'MockData', 'onlinehelp'], cb);
    } else {
        runSequence(['pages', 'assets', 'vendor', 'images', 'fonts', 'styles-base', 'styles', 'unscripts', 'scripts', 'onlinehelp'], cb);
    }
});

// MockData
gulp.task('MockData', function () {
    let baseUrl = 'data';
    let appendData = '';
    let mockJsFile = './scripts/plugins/mockData/MockData.js';
    let files;
    fs.writeFileSync(mockJsFile, 'define( [ \'plugins/mockData/mock-min\'], function (Mock) {\n' +
    'var errorData = {"success": false,"data": null,"failCode": 404,"params": null,"message": "没有找到此文件"};\n', 'utf8'); //同步写入
    if (fs.existsSync(baseUrl)) { //获取目录下的文件
        files = fs.readdirSync(baseUrl);

        for (var i = 0, fileLen = files.length; i < fileLen; i++) {
            var _thisFile = files[i];
            var objName = _thisFile.replace('.js', '');
            var requireFile = "./" + baseUrl + "/" + objName;
            var _thisObj = require(requireFile);
            for (var item in _thisObj) {
                var _thisTemplate = _thisObj[item];
                if (typeof _thisObj[item] === "object") {
                    _thisTemplate = JSON.stringify(_thisTemplate);
                }
                appendData = 'Mock.mock("/' + objName + '/' + item + '",' + _thisTemplate + ');\n';
                fs.appendFileSync(mockJsFile, appendData, 'utf8');
            }
        }
        imageFunc();
        var reg = /^\//;
        fs.appendFileSync(mockJsFile, '\n  $.ajaxPrefilter(function (options, originalOptions, jqXHR) { if((options.type).toUpperCase() == \'GET\'){options.cache = true;} (!(' + reg + '.test(options.url))) && (options.url = "/" + options.url)});\n  ' +
        '\n  var tokenId = parseInt(1000000000*Math.random()); ' +
        '\n return {config: {isMock: true,login: function (user) {' +
        'tokenId && Cookies.set(\'tokenId\', tokenId);' +
        'if (user) {' +
        'Cookies.set(\'userName\', user.userName);' +
        'Cookies.set(\'loginName\', user.loginName);' +
        'Cookies.set(\'userid\', user.userid);' +
        'Cookies.set(\'userType\', user.userType);' +
        '}' +
        '}}};\n});', 'utf8');
        //createStreamFile();
    } else {
        console.log(baseUrl + "  Not Found!");
    }

    function imageFunc() {
        var srtImgFun = '\n var regArr = [".jpg",".gif",".svg",".png"];' +
            '//var reg=/^?(\.jpg|\.png|\.gif|\.svg)$/;\n' +
            'var imgs= $("img");' +
            'if(imgs.length){' +
            '$.each(imgs,function(index,item){' +
            'var thisImgSrc = $(item).attr("src");' +
            'console.log(thisImgSrc);' +
            'var thisImgSrcType = $(item).attr("src").slice(-4);' +
            'if(thisImgSrcType.indexOf(regArr)<0){' +
            '$.get(thisImgSrc,function(result){' +
            'console.log(result);' +
            'var data = JSON.parse(result);' +
            '$(item).attr("src",data.imageUrl);' +
            '/*$(item).attr("src", eval(result));*/' +
            '})' +
            '}' +
            '}' +
            ')}';
        fs.appendFileSync(mockJsFile, srtImgFun, 'utf8');
    }
});

// 运行 BrowserSync
gulp.task('server', ['build'], function () {
    var path = require('path');
    var url = require('url');
    var fs = require('fs');
    var browserSync = require('browser-sync');
    var proxyMiddleware = require('http-proxy-middleware');
    var Mock = require('mockjs');
    var uuid = require('uuid');

    var middleware = [];
    var isMock = DEMO;

    if (isMock) {
        middleware = function (req, res, next) {
            var urlObj = url.parse(req.url, true),
                method = req.method,
                query = urlObj.query,
                mockUrl;

            var body = '';
            req.on('data', function (data) {
                body += data;
            });

            req.on('end', function () {

                if (urlObj.pathname.match(/\..+$/) || urlObj.pathname.match(/\/$/)) {
                    next();
                    return;
                }
                body = body || JSON.stringify(query);
                console.log('[requist] ', method, urlObj.pathname, body);

                var dataUrl = 'data';
                var pathTree = urlObj.pathname.split('/');
                var mockDataFile = path.join(__dirname + path.sep + dataUrl, path.sep + pathTree[1]) + ".js";
                //file exist or not
                fs.access(mockDataFile, fs.F_OK, function (err) {
                    var isImage = req.headers.accept.indexOf('image') != -1;

                    if (err) {
                        var c = {
                            "success": false,
                            "data": null,
                            "failCode": 404,
                            "params": null,
                            "message": "无响应数据",
                            "notFound": mockDataFile
                        };
                        //console.log('[response] ', c);
                        res.setHeader('Content-Type', (isImage ? 'image/*' : 'application/json'));
                        res.end(JSON.stringify(c));
                        next();
                        return;
                    }

                    try {
                        delete require.cache[require.resolve(mockDataFile)];

                        var data = require(mockDataFile) || {};
                        var result, mockUrl = pathTree[2];

                        if (data[mockUrl] && typeof data[mockUrl] === "object") {
                            result = Mock.mock(data[mockUrl]);
                        } else if (typeof data[mockUrl] === 'function') {
                            var options;
                            try {
                                options = {body: JSON.parse(body)};
                            } catch (e) {
                                options = {body: JSON.parse('{"' + body.replace(/=/g, '":"').replace(/&/g, '","') + '"}')};
                            }
                            result = Mock.mock(data[mockUrl](options || {}));
                        }
                        isImage && (result = Mock.Random.image(data[mockUrl]));

                        res.setHeader('Access-Control-Allow-Origin', '*');
                        res.setHeader('Content-Type', (isImage ? 'image/*' : 'application/json'));
                        res.setHeader('tokenId', uuid.v1());
                        var s = result || {
                                "success": false,
                                "data": null,
                                "failCode": 0,
                                "params": null,
                                "message": null
                            };
                        //console.log('[response] ', JSON.stringify(s));
                        res.end(JSON.stringify(s) || s);
                    } catch (e) {
                        console.error(e);
                    }
                });

            });
            //next();
        };
    } else {
        var host = 'http://127.0.0.1:8080';
        middleware = [
            proxyMiddleware(['/app'], {target: host, changeOrigin: true})
        ];
    }

    browserSync({
        //files: '/build/**', //监听整个项目
        open: false, // 'external' 打开外部URL, 'local' 打开本地主机URL
        //https: true,
        port: 80,
        online: false,
        notify: false,
        logLevel: "info",
        logPrefix: "iems mock",
        logConnections: true, //日志中记录连接
        logFileChanges: true, //日志信息有关更改的文件
        scrollProportionally: false, //视口同步到顶部位置
        ghostMode: {
            clicks: false,
            forms: false,
            scroll: false
        },
        server: {
            baseDir: './build',
            middleware: middleware
        }
    });

    gulp.watch(src.assets, ['assets']);
    gulp.watch(src.images, ['images']);
    gulp.watch(src.pages, ['pages']);
    gulp.watch(src.data, ['MockData']);
    gulp.watch(src.styles, ['styles-base', 'styles']);
    //gulp.watch(src.styles[2], ['styles']);
    gulp.watch(src.scripts[4], ['unscripts', 'scripts']);
    gulp.watch('./build/**/*.*', function (file) {
        browserSync.reload(path.relative(__dirname, file.path));
    });

});

gulp.task('help', function () {
    console.log('  gulp build               文件发布打包');
    console.log('  gulp assets                  静态资源文件发布');
    console.log('  gulp images                  图片文件发布');
    console.log('  gulp pages               html（模板）页面文件发布');
    console.log('  gulp styles                  css（less）层叠样式文件发布');
    console.log('  gulp scripts             JavaScript脚本文件发布');
    console.log('  gulp help                gulp参数说明');
    console.log('  gulp server                  测试server');
    console.log('  gulp --demo              DEMO环境');
    console.log('  gulp --deploy            生产环境（默认生产环境）');
    console.log('  gulp --release           开发环境');
});
Andrew_L
关注
专栏目录
gulp打包项目案例代码
02-21
【gulp打包项目案例代码】是一个面向初学者的实践教程，旨在教授如何利用Gulp.js工具进行项目的构建与打包。Gulp.js是一个自动化任务管理器，它允许开发者通过编写JavaScript任务来自动化前端开发流程，如编译Sass到...
Gulp Succinctly
01-31
Gulp是一个基于Node.js的自动化构建工具，它使用流（stream）的方式来处理文件，这使得它在处理大型项目时效率更高。Gulp的流式处理是构建现代Web应用的一个重要特性，它能够帮助开发者更高效地完成诸如JavaScript...
node入门（三）——gulp运用实例
ala9527的博客
04-10 84
　　在上一篇《node入门（二）——gulpfile.js初探》中，我们知道了（看懂入门二及其参考资料）怎么运用gulp来更高效的开发，现在来示范一下。 　　在package.json里面配置好devDependencies： "devDependencies": { "browser-sync": "^2.10.1", "del": "^2.2.0", ...
Gulp 案例（三）
qq_24719349的博客
11-14 179
一、样式编译 首先调用gulp提供的api=>src来指定需要编译的文件，这里可以使用通配符的方式指定多个文件。然后在src后面可以传入一些options，大家有兴趣可以去看文档，这里就不做过多介绍了：https://www.gulpjs.com.cn/docs/api/src/。 这里我们需要编译样式文件夹中的scss文件，所以需要用到gulp-sass这个包，所以需要先安装这个包（这里注意，gulp-sass里有一个node-sass模块依赖，这个依赖需要从国外库去下载，国内网络很可能下载不下来
nodejs安装环境搭建--gulp安装
u010513603的博客
11-27 3736
原文：3w.ydcss.co*m/archives/18#lesson6 1. 下载nodejs安装包 去nodejs官网下载软件https://nodejs.org 2. 安装Nodejs Window：直接下一步下一步式安装。安装好后WIN+R输入cmd调出DOS窗口，输入node看是否有交互，如果没有则查看系统变量Path，把path配置上去。  Linux : 暂时没有实战。...
初探nodejs，学习使用gulp管理前端文件
weixin_38169206的博客
06-22 79
1、安装node.js（https://nodejs.org/en/） 安装后使用node -v查看版本 node安装完之后会顺带安装npm ps：npm其实是Node.js的包管理工具（package manager）为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜...
Gulp在前端的常用操作实例
王乐平 技术博客
02-17 4185
以前在做代码优化的时候，一般都用一些网上的在线工具来完成，写LESS的时候，一般用Koala来编译，感觉用起来也挺不错的。但是现在构建工具的出现，让以前做的那些繁琐操作变的更方便一些了，我在这里也用构建工具来完成一下我以前一些前端的工作。这里我选用了Gulp来使用。实例概要 代码压缩 CSS自动加前缀 LESS编译 地址版本追加 文件合并 文件修改自动刷新页面 Gulp一些入门知识这里还是说一下Gu
gulp之详解
03-31
#### 四、Gulp使用案例 假设有一个简单的项目结构如下： ``` gulp_pro/ ├── css/ ├── js/ ├── images/ ├── disk/ └── package.json ``` **1. 初始化项目** 进入项目文件夹，使用`npm init`命令...
自动gulp入门指南
04-24
Gulp 是一个流行的基于 Node.js 的自动化构建工具，广泛应用于 Web 前端项目的开发过程中。通过编写 Gulp 脚本来处理一系列常见的重复性任务，如压缩 CSS 和 JavaScript 文件、编译 Sass/LESS 或 CoffeeScript 代码...
nodejs-presentation
02-12
3. **构建工具**: 使用Gulp、Webpack等基于Node.js的工具自动化构建前端项目。 4. **微服务架构**: Node.js轻量级的特性适合构建微服务，提升系统可扩展性。 5. **数据处理**: 处理大量数据流，如日志分析、实时监控...
gulp 实例 demo
wis2007的专栏
12-22 2275
<blockquote> 今天专门拿一个小页面来当 demo 来测试一下 gulp 的实际应用。过程中自然是各种小问题陆续呈现、各种自我需求不断促使去完善。目前折腾出一个为自己所需的、较为完整的 demo ，准备当作后续模板改编应用。走一次顺序：局部安装新建目录 gulp_test ，并在该目录下局部安装 gulp ： 1npm install gulp --save-dev局部安装完后，目录 g
Gulp 使用
huijianpang的专栏
03-25 1576
1. gulp 安装    $ npm  install gulp -g    cd   2. task 创建 3. 示例代码 /* jshint node:true */ 'use strict'; // generated on 2015-02-10 using generator-gulp-webapp 0.2.0 var gulp = require('gulp')
nodejs+npm+gulp使用详细教程
自由人生
04-21 2827
nodejs+npm+gulp使用详细教程 nodejs简介npm简介gulp简介gulp入门npm模块管理 nodejs简介 nodejs 是一个javascript运行环境。 npm简介 NPM（node package manager），通常称为node包管理器。安装node的时候已经集成了npm，它的主要功能就是管理node包，包括：安装、卸载、更新、查看
Nodejs gulp 简单使用
小小九儿的博客
08-02 765
1、安装node.js 安装验证：node -v npm -v 打印出npm的版本号，说明npm也安装成功(node安装包中已集成了npm,因此在安装nodejs的同时也安装了npm)。 2、设置npm 由于https://www.npmjs.com在国内访问不稳定，因此建议使用国内镜向站点https://npm.taobao.org 具体方法如下： 通过config命令 npm co...
NodeJS中安装第三方模块`Gulp`以及它的使用
lvhanghmm的博客
09-06 721
目录NodeJS中安装第三方模块Gulp以及它的使用Gulp能够做什么Gulp的使用使用npm install gulp 下载gulp库文件在项目根目录下建立gulpfile.js文件重构项目的文件夹结构src目录放置源代码文件dist目录放置构建后文件在gulpfile.js文件中编写任务.Gulp中提供的方法在命令行工具中执行gulp任务Gulp插件gulp-htmlmin：html文件压缩...
react 中 引入图片的几种方式
热门推荐
zyx的博客
06-01 3万+
//方式一：import tsIcon from '../images/typescript.jpeg';//方式二：const tsIcon = require('../images/typescript.jpeg');//使用方式一：&lt;img src={tsIcon} alt="" /&gt;//使用方式二：&lt;div style={{background: `url(${tsIco...
心理咨询师证有用吗 含金量高吗
v1272514910的博客
03-26 867
随着社会的多元化发展，资源重新整合，社会分工与社会角色重新定义，各方面的机会越来越多，但是竞争的压力也是越来越激烈，每个人的社会压力也会与日俱增，从而产生心理问题的人就会慢慢的多了起来，在这个时候，心理咨询师作为社会情绪的稳定剂，渐渐的也成为了社会发展中不可缺少的一员。随着现在社会压力的增加人们的压力也是越来越大的，所以心理咨询师的证书还是非常有必要考的，特别是在我们国家的一线城市，心理咨询师的含金量是相当高的。2) 增加自己职业竞争的软实力，让自己在自己的职业生涯中获得更大的发展空间。
知识图谱-基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目-附项目源码+流程教程-优质项目实战
10-20
知识图谱_基于Neo4j+Python+Cypher+KG实现的小型金融知识图谱构建项目_附项目源码+流程教程_优质项目实战
资产管理系统-使用Python+CSS开发的资产配置管理系统-附完整流程教程-优质项目.zip
最新发布
10-20
资产管理系统_使用Python+CSS开发的资产配置管理系统_附完整流程教程_优质项目
基于Nodejs的运营配置平台三级维度解决方案
基于Nodejs的运营配置平台解决方案是一个基于Node.js技术栈的运营配置平台解决方案，旨在为企业提供一站式的运营配置平台解决方案。该解决方案具有三级维度的功能拆解，包括组件托管、可视化物料编辑、组件安装、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值