3. 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‘]);

任务执行(需进入项目所在目录执行)

这里的greet为任务名称,a为a任务,b为b任务,default为[]里的所有任务

gulp a
时间: 2024-11-10 07:06:47

3. gulp安装和使用的相关文章

Gulp安装及配合组件构建前端开发一体化

所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev # 局部安装 全局安装 1. 将安装包放在

gulp安装成功但是无法使用

gulp安装正常,但是查看gulp -v和使用gulp的时候报错, 原因:缺少环境变量或环境变量错误. 查找环境变量的方法:在dos下输入npm config get prefix就会显示一个地址,这个地址就是那个系统变量PATH 例如: path中添加路径:C:\Users\z\AppData\Roaming\npm

gulp安装只需六步

  1,https://nodejs.org/en/下载安装node,并且通过node -v来检测是否安装成功. 2,通过cmd,将命令转到自己项目目录,输入命令npm install -g gulp安装gulp,通过命令npm install --save-dev安装到本地项目.并且通过gulp -v检测是否安装成功. 3,输入命令npm init创建package.json,并且输入项目名称 版本号 描述,入口文件 然后确定输入 命令y创建成功. 4,新建入口文件 gulpfile.js,并

Gulp安装及配合组件构建前端开发一体化(转)

Gulp安装及配合组件构建前端开发一体化 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3p484). Gulp 是一款基于任务的设计模式的自动化工具,通过插件的配合解决全套前端解决方案,如静态页面压缩.图片压缩.JS合并.SASS同步编译并压缩CSS.服务器控制客户端同步刷新. Gulp安装 全局安装Gulpjs npm install -g gulp  #全局安装 局部安装Gulpjs npm install gulp --save-dev

gulp安装

gulp安装参考.gulp安装参考2. 一.NPM npm是node.js的包管理工具,主要功能是管理.更新.搜索.发布node的包. Gulp是通过npm安装的. 所以首先,需要安装node.js,并且升级npm到最新版本. 安装nodeJS 基本参考传送门戳这里:安装nodeJs.安装nodeJs2.nodeJs下express的安装到运行 1.    从nodejs.org下载最新的nodejs安装包,并安装. 2.    进入nodejs的安装路径下: 天真的以为这样就可以了. 没有权限

gulp安装+一个超简单入门小demo

gulp安装參考.gulp安装參考2. 一.NPM npm是node.js的包管理工具.主要功能是管理.更新.搜索.公布node的包. Gulp是通过npm安装的. 所以首先,须要安装node.js.而且升级npm到最新版本号. 安装nodeJS 基本參考传送门戳这里:安装nodeJs.安装nodeJs2.nodeJs下express的安装到执行 1.    从nodejs.org下载最新的nodejs安装包.并安装. 2.    进入nodejs的安装路径下: 天真的以为这样就能够了. wat

gulp 安装和使用

1.安装nodejs 网址nodejs.cn 2.npm install -g gulp 安装全局gulpjs 3.npm install --save-dev gulp 安装作为项目开发所需要的依赖项 4.npm install --save-dev gulp-uglify 安装用来压缩js文件的插件 5.npm install --save-dev gulp-minify-css 安装用来压缩css文件的插件 6.npm install --save-dev gulp-concat 安装用来

gulp 安装部署

gulp安装部署 安装gulp-cli命令 : npm install gulp-cli -g 检测gulp : gulp -v 在项目里面安装gulp : npm install gulp --save-dev 在项目根目录创建 : gulpfile.js 原文地址:https://www.cnblogs.com/tutumissed/p/8276306.html

gulp 安装时一直提示缺少模块( Cannot find module 'gulp-load-plugins')

我们要考虑两种情况? 1. 本地安装和全局安装gulp npm i -g gulp && npm i --save-dev gulp 2.新建package.json,然后手动填写缺少的模块名 我的办法是这样的,提示什么模块缺少就直接全局安装,一旦安装以后就会提示最新的版本号,这时,只要我们把版本号填写正确! 最后再运行 npm install 然后运行 gulp gulp 安装时一直提示缺少模块( Cannot find module 'gulp-load-plugins') 原文地址:

gulp安装说明

1.安装node-v6.3.0-x64,安装成功后再点击node-v6.3.0-x64卸载(点击remove). 2.安装node-v4.4.7-x64. 3.打开cmd命令行,输入node -v,查看下版本,如果有显示版本,说明已经安装成功. 4.输入npm -v,查看下npm的版本,如果有显示版本,说明已经安装成功. 5.输入npm install -g gulp命令,安装全局的gulp. 6.安装好后输入gulp -v查看版本,如果有显示版本,说明已经安装成功. 7.在C盘新建个项目,在项