gulp 代码检查、文件压缩、合并和重命名、编译less和监听

矫情吗；* 2021-07-24 16:08 269阅读 0赞

**代码检查(检查语法错误)**
    
    		1、安装
    			cnpm -D install gulp-jshint jshint
    		
    		(2)在gulpfile.js文件中引入
    			var jshint自定义名=require("gulp-jshint")
    
    		(3)创建任务
    
    			gulp.task('自定义任务名',function(cb)
    			{
    				gulp.src("要检查的文件的路径")
    				.pipe(jshint自定义压缩插件名())
    				.pipe(jshint自定义压缩插件名.reporter())
    				cb();
    			})
    				压缩打包多个html文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名
    	
    	**压缩多个文件并合并、重命名**
    
    		1、安装
    			
    			cnpm -D install gulp-concat gulp-rename
    		
    		(2)在gulpfile.js文件中引入
    			var concat自定义名=require("gulp-concat")
    			var rename自定义名=require("gulp-rename")
    
    		(3)创建任务
    
    			gulp.task("reconcat",function(cb){
    				//要合并的文件路径
    					gulp.src("./src/js/*.js")
    					.pipe(concat自定义名("重命名名字"))
    					.pipe(rename自定义名({
    						suffix:".min"
    					}))
    					.pipe(js自定义压缩名())
    					.pipe(gulp.dest("./dist/js"))
    					cb();
    				})
    
    				压缩打包多个html文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名
    			
    
    	**将less文件编译成css文件**
    
    	1、安装
    		cnpm install -D gulp-less
    
    		(2)在gulpfile.js文件中引入
    			var Less = require("gulp-less");
    
    		(3)创建任务
    
    			gulp.task("reLess",function(cb){
    				  gulp.src("src/css/*.less")
    				      .pipe(Less())
    				      .pipe(gulp.dest("dist/css"))
    
    				      cb();
    				})
    
    				压缩打包多个html文件，参考压缩js路径设置
    
    		(4)执行
    			gulp 自定义任务名
    
    **设置监听(文件被修改时执行)**
    
    	gulp.task("自定义任务名",function(cb){
    
    		gulp.watch("监听文件路径",function(){
    			gulp.run(任务名);  //文件发生修改时,重新运行该任务
    		})
    		cb()
    })
    
    	执行监听
    		gupl 自定义任务名

代码示例: