gulp的安装和使用

最新推荐文章于 2025-06-29 15:46:10 发布

原创最新推荐文章于 2025-06-29 15:46:10 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#管理 #gulp #前端

工具类专栏收录该内容

1 篇文章

订阅专栏

gulp的安装和使用

gulp安装前需有nodejs和npm环境(最好用cnpm)
npm介绍

说明：npm（node package manager）nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）；
使用npm安装插件：命令提示符执行npm install [-g] [–save-dev]；
1. ：node插件名称。例：npm install gulp-less –save-dev
2. -g：全局安装。将会安装在C:\Users\Administrator\AppData\Roaming\npm，并且写入系统环境变量；非全局安装：将会安装在当前定位目录；全局安装可以通过命令行在任何地方调用它，本地安装将安装在定位目录的node_modules文件夹下，通过require()调用；
3. -dev：保存至package.json的devDependencies节点，不指定-dev将保存至dependencies节点；一般保存在dependencies的像这些express/ejs/body-parser等等。
为什么要保存至package.json？因为node插件包相对来说非常庞大，所以不加入版本管理，将配置信息写入package.json并将其加入版本管理，其他开发者对应下载即可（命令提示符执行npm install，则会根据package.json下载所有需要的包，npm install –production只下载dependencies节点的包）。
使用npm卸载插件：npm uninstall [-g] [–save-dev] PS：不要直接删除本地插件包
删除全部插件：npm uninstall gulp-less gulp-uglify gulp-concat ……???太麻烦
借助rimraf：npm install rimraf -g 用法：rimraf node_modules
使用npm更新插件：npm update [-g] [–save-dev]
1. 更新全部插件：npm update [–save-dev]
2. 查看npm帮助：npm help
3. 当前目录已安装插件：npm list

安装gulp(全局)

在终端输入npm install gulp -g
安装完成后，同样输入gulp -v输出相应的版本号，则说明安装成功。
至此gulp安装完成

配置项目

下面以一个简单案例来做演示：创一个gulp文件夹作为项目根目录，项目结构如下：这里写图片描述
我们以常用的 gulp-uglify、gulp-concat、gulp-minify-css为例。
先是配置package.json文件，有三种方法：
1. 可以用记事本之类的创建一个
2. 用npm init创建(npm init会自动生成)
3. 也可以复制之前项目的创建好的package.json

本地安装gulp及gulp插件

本地安装gulp

npm install gulp –save-dev（加上–save-dev会把描述自动写入在package.json中）

安装完成后

gulp模块下载到项目中的node_modules文件夹中。

package.json中写入了devDependencies字段，并在该字段下填充了gulp模块名

本地安装gulp插件

接下来安装上面提到的三个插件,在终端中输入

npm install –save-dev gulp-uglify gulp-concat gulp-minify-css

创建gulpfile.js文件

在项目根目录下创建gulpfile.js文件，然后编写如下代码

/引入gulp及相关插件 require(‘node_modules里对应模块’)/
var gulp = require(‘gulp’);
var minifyCss = require(“gulp-minify-css”);
var uglify = require(‘gulp-uglify’);
var concat = require(‘gulp-concat’);
//压缩
gulp.task(‘minify-css’, function () {
gulp.src(‘css/*.css’)
.pipe(minifyCss())
.pipe(gulp.dest(‘dist/css/’));
});
//
gulp.task(‘script’, function () {
gulp.src([‘src/a.js’,”src/b.js”])
.pipe(concat(‘all.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist/js’));
});
gulp.task(‘default’,[‘minify-css’,’script’]);