3. gulp安装和使用

最新推荐文章于 2023-03-21 15:30:23 发布

转载最新推荐文章于 2023-03-21 15:30:23 发布 · 163 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zouxinping/p/4989844.html

文章标签：

#json

本文详细介绍了如何安装Gulp与Grunt，并通过具体实例演示了如何使用Gulp进行任务自动化，包括模块安装、任务创建及执行等关键步骤。

环境

安装gulp和grunt用的都是node 的包管理工具 -npm ，所以你需要先在电脑上安装 node ，这样就能去安装 Gulp 与 Grunt 了。（安装node会自动安装npm，检测安装成功 node -v, npm -v）

安装

在项目里使用gulp，你得先在全局范围内去安装一下 Gulp 的命令行工具，然后在项目里面再去安装 Gulp。(如果遇到权限问题，在命令前加sudo)

npm install -g gulp

进入到项目里面安装一下gulp

npm install gulp

然后输入npm init 为项目创建一个package.json文件，这样可以把gulp作为项目的开发依赖，放到这个package.json文件里面

npm init

gulp的使用

模块安装（--save-dev意思就是把模块作为项目的开发依赖，放到 package.json 这个文件里面。）

npm install 模块名称  --save-dev

任务创建

    var gulp = require('gulp');            // 让gulp变量拥有Gulp的所有方法，创建Gulp的任务，就可使用gulp的task方法
    var uglify = require('gulp-uglify');   // 压缩js
    var rename = require('gulp-rename');   // 改名

    // 创建a任务
    gulp.task('a', function() {
        return gulp.src('src/main.js')
                .pipe(uglify())            // 管道  pipe
                .pipe(gulp.dest('dest'));
    });

    // 创建b任务
    gulp.task("b",function(){
        return gulp.src("src/main.js")
                .pipe(rename("a.min.js"))
                .pipe(gulp.dest("dest"));     　　　　 // 直接写输出目录
        　　　　 //.pipe(gulp.dest("dest/a.min.js"));  // 错误
    });

    gulp.task('default', ['a', 'b']);