首页 > 代码库 > gulp入坑系列(2)——初试JS代码合并与压缩

gulp入坑系列(2)——初试JS代码合并与压缩

2024-08-26 18:47:51   218人阅读

在上一篇里成功安装了gulp到项目中，现在来测试一下gulp的合并与压缩功能

gulp入坑系列(1)——安装gulp（传送门）：http://www.cnblogs.com/YuuyaRin/p/6159809.html

 

在之前建立的项目中写入，在根目录新建js文件夹，并在文件夹中新建两个js文件，代码如下：

index.js:

  1. var index={};  
  2. index={  
  3.     test:function(argument){  
  4.         console.log(‘test‘);  
  5.     }  
  6. }  
  7. index.test();  


main.js:

  1. var main = {};  
  2. main.test=function(argument){  
  3.     console.log("main test");  
  4. }  
  5. main.test();  

 

 

在根目录新建文件夹build，并在build里新建一个空的js文件：all.min.js

在根目录下新建index.html ，在其中引用build下的all.min.js。

index.html:

  1. <script type="text/javascript" src=http://www.mamicode.com/"build/all.min.js"></script>  

接下来编辑gulpfile.js文件，来告诉gulp我们要把index.js，main.js合并起来压缩再写入all.min.js中

 

gulpfile.js:

  1. var gulp = require(‘gulp‘);//gulp自身  
  2. var uglify= require(‘gulp-uglify‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入压缩组件</span>  
  3. var concat = require(‘gulp-concat‘);//<span style="font-family: Arial, Helvetica, sans-serif;">引入合并组建</span>  
  4.   
  5. var paths = {  
  6.     scripts:[‘js/index.js‘,‘js/main.js‘]  
  7. } //定义要操作的文件路径  
  8.   
  9.   
  10. gulp.task(‘default‘, function() {   
  11.   gulp.src(paths.script)//找到项目下paths变量所定义的script文件  
  12.   .pipe(uglify())//压缩  
  13.   .pipe(concat(‘all.min.js‘))//输入到all.min.js中  
  14.   .pipe(gulp.dest(‘build‘));//指定目录  
  15. });  

 

 

tips:gulp的执行流程采用了流式操作，每一个pipe()可以理解成，上一个操作的输出，就是下一个操作的输入，比如uglify()压缩后输出的，就是concat要输入到文件中的，而concat输出的文件，是gulp.dest要加入的目录中的，可以理解成每部操作都return了下一步要使用的东西。

 

最终目录结构如下：

技术分享

接下来就可以在命令行工具中cd到项目的根目录中执行gulp指令了。

此时也许会出现 Cannot find module ‘gulp-uglify‘这样的报错，是因为gulpfile所require的gulp-uglify和gulp-concat插件并不存在，所以可以利用npm在项目中装入即可：

npm install --save-dev gulp-uglify    回车

npm install --save-dev gulp-concat   回车

 

安装完成后再次执行gulp指令，成功后，可以查看一下我们原本空的all.min.js文件，可以看到main.js和index.js已经在all.min.js中压缩合并了

  1. var index={};index={test:function(e){console.log("test")}},index.test();  
  2. var main={};main.test=function(n){console.log("main test")},main.test();  

 

然后运行一下我们的index.html，打开浏览器控制台，会发现两个js的内容成功输出：

技术分享

说明gulp成功执行了JS文件的合并与压缩的操作。

 

gulp入坑系列(2)——初试JS代码合并与压缩


联系
我们