01-glup简介

胡西风_foxww

已于 2023-02-08 20:48:59 修改

阅读量346

点赞数

分类专栏： # gulp工程化文章标签：前端 gulp 简介入门快速入门

于 2023-02-06 09:40:10 首次发布

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/my_study_everyday/article/details/128867036

版权

gulp工程化专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了gulp的安装方法，包括全局安装和项目内安装，并展示了如何创建基本的gulpfile.js。通过实例解释了如何定义和运行任务，以及使用gulp-uglify和gulp-concat插件进行JavaScript文件的压缩和合并。

摘要由CSDN通过智能技术生成

首发github于2018-04-07-gulp-intro.md

gulp的一些有用链接

gulp的安装

全局安装gulp

npm install --global gulp

作为项目的开发依赖（devDependencies）安装

npm install --save-dev gulp

在项目根目录下创建一个名为gulpfile.js的文件

var gulp = require('gulp');

gulp.task('default',function(){
	// 将你的默认的任务代码放在这
});

4 . 运行gulp

gulp

注意

默认的名为default的任务将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入gulp <task> <othertask>

gulp的应用

gulp 是用来帮助我们执行一些重复操作的
一般我们将这些重复的操作划分为不同的任务

如何定义一个任务

第一个参数是任务名
第二个参数是任务执行体

gulp.task('hello',function(){
	console.log(hello kkcode);
});

运行任务

gulp hello

简单的gulpfile.js文件

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');

var paths = {
	script:['js/index.js','js/main.js']
}

gulp.task('default',function(){
	// paths 也可以正则匹配，如： 'js/*.js'
	gulp.src(paths)
			.pipe(uglify)
			.pipe(concat('all.min.js'))
			.pipe(gulp.dest('build'));
});