gulp 搭建项目

最新推荐文章于 2022-07-06 22:07:37 发布
最新推荐文章于 2022-07-06 22:07:37 发布
阅读量2.1k 收藏
点赞数
文章标签： gulp base64 代码压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34117170/article/details/72902366
版权

gulp可以压缩代码，把图片转化为base64格式,提高网页性能，易于项目管理。

下面介绍一下怎么使用

其实gulp相对于webpack更易于学习，但个人感觉gulp没有webpack功能多，webpack把每一个文件都看成一个块，webpack更适用于react,一般情况下gulp足以满足我们的需求

废话不说了直接上代码

gulpfiles.js

/*
 * @Author: wdl
 * @Date:   2017-06-05 09:56:06
 * @Last Modified by:   wdl
 * @Last Modified time: 2017-06-07 17:29:56
 */

'use strict';

var gulp = require('gulp'), // 引入gulp
concat = require("gulp-concat"),
config = require('./gulp/config.json'), 
browserSync = require('browser-sync').create(), 
gulpLoadPlugins = require('gulp-load-plugins')(),

gulpTaskList = require('fs').readdirSync('./gulp/tasks/');
gulpTaskList.forEach(function(taskfile)
{
    require('./gulp/tasks/' + taskfile)(gulp, gulpLoadPlugins, config, browserSync);
});
gulp.task('serve', ['styleTask','scriptTask',  'imageTask','pageTask', 'bower', ], function()
{
    browserSync.init({
        // files: "build/**/*.*",
           // proxy: "localhost:3000/build/pages/index.html"
          port:8082,
          server: {
            baseDir: './build',
            index: './login.html'
        }
    });
});
gulp.task('watch', ['serve'], function()
{
    // 检测文件发送变化
    gulp.watch(config.pageFile.src, ["pageTask"]);
    gulp.watch(config.styleFile.src, ["styleTask"]);
    gulp.watch(config.scriptFile.src, ["scriptTask"]);
    gulp.watch(config.imageFile.src, ["imageTask"]);
    gulp.watch(config.bowerFile.src, ["bower"]);
});
// default 默认任务，依赖清空任务
gulp.task('default', ['watch']);
名字必须为gulpfile.js这是gulp的默认设置。

styleTask.js 
'use strict';
module.exports = function(gulp, plugin, config, browserSync)
{
    var minifyCSS = require('gulp-minify-css');
    var base64 = require('gulp-base64');
    gulp.task('styleTask', function()
    {
        return gulp.src(config.styleFile.src)
                       .pipe(plugin.cache(plugin.cleanCss()))
                       .pipe(minifyCSS())
                       .pipe(base64())
                       .pipe(gulp.dest(config.styleFile.dest))
                       // .pipe(plugin.notify({
                       //     message: 'Styles task complete'
                       // }))
                       .pipe(browserSync.reload({
                           stream: true
                       }));
    });

};
压缩代码并把css里面的图片改为base64格式


pageTask.js

'use strict';
module.exports = function(gulp, plugin, config, browserSync)
{
    gulp.task('pageTask', function()
    {
        gulp.src(config.pageFile.src)
        	.pipe(plugin.htmlmin({
	            collapseWhitespace: true,// 压缩HTML
	            minifyJS: true,// 压缩页面JS
	            minifyCSS: true// 压缩页面CSS
    		}))
        	.pipe(gulp.dest(config.pageFile.dest))
        	// .pipe(plugin.notify({
         //    	message: 'Pages task complete'
        	// }))
        	.pipe(browserSync.reload({
           		 stream: true
        	}));
    });
};
页面压缩

imageTask.js  图片

/*
 * @Author: wdl
 * @Date:   2017-06-05 09:56:06
 * @Last Modified by:   wdl
 * @Last Modified time: 2017-06-07 17:51:30
 */

'use strict';
module.exports = function(gulp, plugin, config,browserSync)
{
    gulp.task('scriptTask', function()
    {
        return gulp.src(config.scriptFile.src)
               .pipe(plugin.cache(plugin.jshint()))
               .pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示
               .pipe(plugin.uglify())
               .pipe(gulp.dest(config.scriptFile.dest))
               .pipe(browserSync.reload({stream: true}));
      
    });
};


scriptFile.js









/*
 * @Author: wdl
 * @Date:   2017-06-05 09:56:06
 * @Last Modified by:   wdl
 * @Last Modified time: 2017-06-07 17:51:30
 */

'use strict';
module.exports = function(gulp, plugin, config,browserSync)
{
    gulp.task('scriptTask', function()
    {
        return gulp.src(config.scriptFile.src)
               .pipe(plugin.cache(plugin.jshint()))
               .pipe(plugin.jshint.reporter('default'))// 对代码进行报错提示
               .pipe(plugin.uglify())
               .pipe(gulp.dest(config.scriptFile.dest))
               .pipe(browserSync.reload({stream: true}));
      
    });
};
bower.js


/*
 * @Author: wdl
 * @Date:   2017-06-05 09:56:06
 * @Last Modified by:   wdl
 * @Last Modified time: 2017-06-06 16:15:46
 */

'use strict';

module.exports = function(gulp, plugin, config,browserSync)
{
    var concat = require("gulp-concat");
    var minifyCSS = require('gulp-minify-css')
    gulp.task('bower', function() {

    var bower_folder = "bower_components";
    var src = {
        js: [
            bower_folder + '/jquery/dist/jquery.min.js',
            bower_folder + '/bootstrap/dist/js/bootstrap.min.js',
            bower_folder + '/bootstrap/dist/js/tableExport.js',
            './build/js/header.js',



        ],
        css: [
            // bower_folder + "/bootstrap/dist/css/bootstrap.min.css",
           
            bower_folder + "/bootstrap/dist/css/bootstrap.css",
             "./build/css/header.css",

          

        ],
        font:[
                bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
                bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
                bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
                bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
                bower_folder + '/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2',
            
        ],
        DashboardPlugin:{
                js: [
                    bower_folder + '/bootstrap/dist/js/bootstrap-datetimepicker.min.js',
                    bower_folder + '/bootstrap/dist/js/bootstrap-table.js',
                    bower_folder + '/bootstrap/dist/js/bootstrap-editable.js',
                    bower_folder + '/bootstrap/dist/js/bootstrap-table-export.js',
                    bower_folder + '/bootstrap/dist/js/bootstrap-table-zh-CN.min.js',
                    bower_folder + '/FileSaver/FileSaver.min.js',
                    bower_folder + '/jsPDF/jquery.base64.js',
                    bower_folder + '/jsPDF/jspdf.js',
                    bower_folder + '/jsPDF/mybasejs.js',
                    bower_folder + '/pdfmake/pdfmake.js',
                    bower_folder + '/pdfmake/vfs_fonts.js',

                ],
                css: [           
                    bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",
                    bower_folder + "/bootstrap/dist/css/bootstrap-table.css",
                    bower_folder + "/bootstrap/dist/css/bootstrap-editable.css",
                    // bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",

                ]
            },
          AvaInsightPlugin:{
                js: [
                    bower_folder + '/jquery-ui-1.10.3.custom.min.js',
                    bower_folder + '/bootstrap/dist/js/bootstrap-datetimepicker.min.js',
                    bower_folder + '/highchart/highcharts.js',
                    bower_folder + '/zTree_v3-master/js/jquery.ztree.core.js',
                    bower_folder + '/jQDateRangeSlider/jQDateRangeSlider-min.js',

                ],
                css: [           
                    bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",
                    bower_folder + '/jQDateRangeSlider/iThing.css',
                    bower_folder + '/zTree_v3-master/css/zTreeStyle/zTreeStyle.css',
                    // bower_folder + "/bootstrap/dist/css/bootstrap-datetimepicker.min.css",

                ],
                img:[
                    bower_folder + '/zTree_v3-master/css/zTreeStyle/img/*.*',
                ]
            },

    }




    //合并第三方js
    gulp.src(src.js)
        .pipe(concat("vendor.js"))
        .pipe(gulp.dest( config.scriptFile.dest));

    //合并第三方css
    gulp.src(src.css)
        .pipe(concat("vendor.css"))
        .pipe(minifyCSS())
        .pipe(gulp.dest(config.styleFile.dest));

    // //复制 font 到/dist/font/文件夹
    gulp.src(src.font)
        .pipe(gulp.dest('build/fonts'));

    //dashboard所需plugin
    gulp.src(src.DashboardPlugin.js)
        .pipe(concat("DashboardPlugin.js"))
        .pipe(gulp.dest( config.pluginjs.dest));
    gulp.src(src.DashboardPlugin.css)
        .pipe(concat("DashboardPlugin.css"))
        .pipe(gulp.dest( config.plugincss.dest));

     //AvaInsight所需plugin
    gulp.src(src.AvaInsightPlugin.js)
        .pipe(concat("AvaInsightPlugin.js"))
        .pipe(gulp.dest( config.pluginjs.dest));
    gulp.src(src.AvaInsightPlugin.css)
        .pipe(concat("AvaInsightPlugin.css"))
        .pipe(gulp.dest( config.plugincss.dest));
    gulp.src(src.AvaInsightPlugin.img)
        .pipe(gulp.dest( config.plugincss.dest+'/img'));



});
};
config.json


{
  "imageFile" : {
    "src" : "src/img/**/*.{jpg,png,gif}",
    "dest" : "build/img"
  },
  "styleFile" : {
    "src" : "src/css/**/*.css",
    "dest" : "build/css"
  },
  "scriptFile" : {
    "src" : "src/js/**/*.js",
    "dest" : "build/js"
  },
  "pageFile" : {
    "src" : "src/**/*.html",
    "dest" : "build/"
  },
  "bowerFile" : {
    "src" : "src/js/**/header.js",
    "dest" : "build/js"
  },
  "pluginjs" : {
    "dest" : "build/plugin/js"
  },
  "plugincss" : {
    "dest" : "build/plugin/css"
  }
}


先贴到这里，稍后补全













                

        

        

    

  


    

      

        

            

              
                
                  DenggLin
                
              
            

            

                关注
              
            

        

        

          
      

      









                



	

		

			

				
					
gulp项目搭建

				
			

			

				

					xiaomin_er的博客
				

				

					03-30
					
					282
					
				

			

		

		

			
				
准备工作

https://blog.csdn.net/xiaomin_er/article/details/105188483

1.打开cmd，切换到需要搭建服务器的地方



2.输入 cnmp init,一路敲回车，自动生成package.json



3，下载安装gulp

输入 cnpm install gulp@3.9.1 --save-dev，





4.手...

			
		

	



                

              
                



	

		

			

				
					
gulp搭建

				
			

			

				

					Daken_TlB的博客
				

				

					03-11
					
					193
					
				

			

		

		

			
				
Gulp搭建
  首先我们要明确Gulp是基于node.js的一个前端自动化构建工具，开发者可以使用它构建自动化工作流程（前端集成开发环境）。使用Gulp可以简化工作量，让你把重点放在功能开发上，从而提高你的开发效率和工作质量。

  我们首先要安装node.js。node.js官方网站(点击链接下载)

  Node.js由三部分组成：1.内置模块、2.第三方模块、3.自定义模块，Gulp属于第...

			
		

	



                


  
              

                


	

		

			

				
					
构建工具 | Gulp环境搭建

				
			

			

				

					weixin_42655047的博客
				

				

					11-03
					
					267
					
				

			

		

		

			
				
相关构建工具官网

Grunt: JavaScript 世界的构建工具 | Grunt 中文网Grunt 是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件，几乎任何你所要做的事情都可以用 Grunt 实现。https://www.gruntjs.net/gulp.js - 基于流(stream)的自动化构建工具 | gulp.js 中文网Gulp.js 是一个自动化构建工具，开发者可以使用它在项目开发过程中自动执行常见任务。Gulp.js 是基于 Node

			
		

	





	

		

			

				
					
gulp搭建自动化步骤

				
			

			

				

					牛先森家的博客
				

				

					07-22
					
					470
					
				

			

		

		

			
				
gulp搭建自动化步骤gulp步骤如下gulp代码如下gulp服务器工具使用全部代码如下 文件名 gulpfile.js但是为了区分环境 把整个gulpfile.js文件内容分开写1、gulpfile.dev.js2、gulpfile.build.js3、gulpfile.js4、改动package.json文件指令5、目录名如下
gulp步骤如下
1、初始化项目： npm install -y或者 npm i -y
2、安装gulp-cli ： npm i gulp-cli -g
3、安装 gulp： n

			
		

	



		

			
		



	

		

			

				
					
手动搭建gulpjs

				
			

			

				

					负数
				

				

					02-13
					
					148
					
				

			

		

		

			
				
var gulp = require('gulp');
var scss = require('gulp-sass');
var mincss = require('gulp-clean-css');
var server = require('gulp-webserver');
var mergeJs = require('gulp-concat');
var minjs = require('...

			
		

	





	

		

			

				
					
gulp搭建项目框架模板

				
			

			

				

					02-20
				

			

		

		

			
				
本项目以"gulp搭建项目框架模板"为主题，结合bootstrap和jquery，为开发者提供了一个快速启动网站项目的基础框架。下面我们将深入探讨相关知识点。  首先，`gulp`是一个基于Node.js的流式构建系统。它允许开发者定义...

			
		

	





	

		

			

				
					
人工智能项目资料-关于Web前端的一些基本练习，使用Gulp搭建项目以及JavaScript常用的设计模式.zip

					
最新发布

				
			

			

				

					02-07
				

			

		

		

			
				
这是关于Web前端的一些基本练习，包括双飞翼布局、瀑布流、css3动画和绘制图像的新属性、Javascript的操作、利用php+mysql开发手机移动端页面、Nodejs的开发使用、CSS预处理less、使用Gulp搭建项目以及JavaScript...

			
		

	





	

		

			

				
					
gulp搭建前端框架

				
			

			

				

					08-10
				

			

		

		

			
				
**gulp搭建前端框架**  在现代前端开发中，自动化工具扮演着至关重要的角色，它们能够显著提升工作效率，简化项目构建流程。其中，`gulp` 是一个非常流行的任务运行器，它基于Node.js，采用流式处理方式，使得构建...

			
		

	





	

		

			

				
					
使用Vue，Express，Webpack，gulp搭建的自动化电影库项目.zip

				
			

			

				

					10-21
				

			

		

		

			
				
在这个名为"使用Vue，Express，Webpack，gulp搭建的自动化电影库项目.zip"的压缩包中，包含了一个基于现代前端和后端技术构建的电影库应用。这个项目利用了Vue.js作为前端框架，Express.js作为后端框架，Webpack作为...

			
		

	





	

		

			

				
					
【工具】gulp自动化构建工具入门教程

				
			

			

				

					前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
				

				

					11-14
					
					1552
					
				

			

		

		

			
				
gulp 是基于流（stream）的自动化构建工具，能帮助前端节省很多资源。
OK，直接进入主题——本篇中将主要介绍怎么用gulp。1 . 先到nodeJs的官网（https://nodejs.org/en/）下载安装nodejs,因为gulp是基于node环境；然后再cmd命令行工具中你可以检测node的版本以此判断node是否安装成功；2.安装 npm ,使用 npm 可以方便的安装 gulp;然后再 cmd 命令行工具中你也可以检测 npm 的版本以此判断 node 是否安装成功；
3.根据你的项目路

			
		

	





	

		

			

				
					
新手小白快速使用gulp搭建静态服务器写好详细教程

				
			

			

				

					cty13697011482的博客
				

				

					09-25
					
					431
					
				

			

		

		

			
				
1、什么是gulp？

gulp是一个自动的打包工具，前端开发者可以使用gulp来处理常见任务，快速的编写代码，提高工作效率。

2、gulp能做些什么？

gulp是基于Nodejs的自动任务运行器，它拥有搭建静态服务器，文件保存时自动重载浏览器，使用预处理器如sass\less，优化资源，比如压缩css，压缩javascript，压缩图片等等强大的功能。

3、gulp的安装

前面说了gulp是基于Nodejs的，所以我们需要先安装node
在node环境下安装全局的gulp，-g是安装全局的意思



			
		

	





	

		

			

				
					
如何用 Gulp 构建自动化项目

				
			

			

				

					weixin_37883657的博客
				

				

					11-26
					
					165
					
				

			

		

		

			
				
1、npm安装gulp全局：npmaddgulp-g
	
	
	2、yarn安装gulp：yarnaddgulp--dev
	
	
	3、新建一个文件夹，之后初始化项目
	
   makdirpages-boilerplate新建文件夹

   yarninit--yes会出现一个pageage.json

4、项目根目录新建gulpfile.js文件,配置任务

const { src, dest, parallel, series, ...

			
		

	





	

		

			

				
					
如何使用Gulp完成项目的自动化构建

				
			

			

				

					qq_39077394的博客
				

				

					07-06
					
					1266
					
				

			

		

		

			
				
1、yarn init 初始化 package.json2、yarn add gulp --dev 将gulp作为开发依赖安装3、项目根目录创建gulpfile.js，作为gulp的入口文件
4、命令行通过运行这个任务[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xq38PEw1-1657116342942)(C:\Users\86133\AppData\Roaming\Typora\typora-user-images\1657008252101.png)]最新的gulp当

			
		

	





	

		

			

				
					
快速搭建gulp项目实战

				
			

			

				

					weixin_30594001的博客
				

				

					06-29
					
					180
					
				

			

		

		

			
				
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。
正文
1. 安装NodeJS，自行在node官网下载，并安装，通过node-v检查是否安装成功

2.在此项目中，使用的是cnpm进行安装的，如果想使用cnpm安装，去...

			
		

	





	

		

			

				
					
gulp构建项目（一）：环境准备及项目基础结构搭建

				
			

			

				

					猿始森林
				

				

					11-30
					
					4395
					
				

			

		

		

			
				
一、创建package.json文件
npm init    // 一路回车就行（默认已安装node）

package.json内容如下:

 {
     "name": "gulp-project",
     "version": &a

			
		

	





	

		

			

				
					
【gulp】用gulp搭建一个前端项目

				
			

			

				

					hello world_
				

				

					12-05
					
					1120
					
				

			

		

		

			
				
一、安装与创建


	1.安装node：https://nodejs.org/zh-cn/
	
	
	2.安装gulp：npm install gulp -g
	
	
	3.新建一个文件夹用来存放项目
	
	
	4.在命令行进入创建的文件夹输入 gulp init即可
	
	
	5.新建一个gulpfile.js文件配置任务
	
也可以使用我搭建好的项目模板：https://download.cs...

			
		

	





	

		

			

				
					
gulp构建前端自动化开发环境

				
			

			

				

					lensgcx的博客
				

				

					05-08
					
					4086
					
				

			

		

		

			
				
Gulp安装及配合组件构建前端开发一体化
gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；gulp不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；类似的工具还有grunt，webpack，它们各有利弊。
简单表述一下gulp的使用安装：
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置g

			
		

	





	

		

			

				
					
前端构建工具gulp超详细配置, 使用教程(图文)

					
热门推荐

				
			

			

				

					翾的博客
				

				

					06-13
					
					1万+
					
				

			

		

		

			
				
原文地址:http://www.cnblogs.com/2050/p/4198792.html, 我在原文中做了一些修改和添加. 流程1. 输入命令(可以使用git bash或者命令控制台cmd) npm install -g gulp
安装全局gulp命令
2. 创建一个项目文件夹, 当前项目文件夹下输入命令npm init 
配置package.json文件, 这一部分看情况自己决定是否填, 不

			
		

	





	

		

			

				
					
使用gulp构建一个项目

				
			

			

				

					湛庐无方
				

				

					06-01
					
					8656
					
				

			

		

		

			
				
gulp是前端开发过程中自动构建项目的工具，相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。
gulp是基于Nodejs的自动运行器，他借鉴了Unix操作系统的管道（pipe）思想，前一级的输出是后一级的输入。下面是具体流程：

			
		

	





	

		

			

				
					
使用Gulp搭建前端自动化构建环境

				
			

			

				

					
				

			

		

		

			
				
"本文主要介绍了如何使用Node.js搭建前端自动化构建环境，重点是使用Gulp进行构建任务的自动化。文章适合需要提升开发效率和代码质量的前端开发者参考。"  在现代Web开发中，前端自动化构建环境是不可或缺的一部分，...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值