1 全局安装gulp:npm install -g gulp

2 在项目根目录中,安装项目的开发依赖:npm install --save-dev gulp

  2.1 根据gulpfile.js中的依赖包,先安装好对应的包。如:npm install --save-dev gulp-uglify

3 在需要构建打包的目录下,新建一个gulpfile.js文件,在该文件中,写上task任务。如下所示:

var gulp = require('gulp');
  //npm install --save-dev gulp-uglify
uglify = require('gulp-uglify'); gulp.task('default', function() {
return gulp.src('./test.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});

4 在当前目录下,按住键盘shift键,然后右击鼠标,选择“在此处打开命令窗口”。在命令行中,输入:gulp,按enter,就开始编译了。

5 编译指定task。如下所示:

var gulp = require('gulp');
  //npm install --save-dev gulp-uglify
uglify = require('gulp-uglify'); gulp.task('test', function() {
return gulp.src('./test.js')
.pipe(uglify())
.pipe(gulp.dest('./dist/'));
});

这次,在命令行中,就要输入:gulp test,按enter,就开始编译了。

参考:

http://www.gulpjs.com.cn/docs/getting-started/

gulp安装简介的更多相关文章

  1. gulp安装和使用简介

    一. gulp和grunt对比 grunt目前的工作流程:读文件.修改文件.写文件——读文件.修改文件.写文件——... gulp目前的工作流程:读取文件——修改文件——修改文件...——写文件 二. ...

  2. windows下Gulp入门详细教程 &&gulp安装失败的原因(红色)

    以下教程亲自实践可行: 另外添加一个Gulp自动编译.压缩.更新.测试的教程链接:https://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8 ...

  3. Gulp.js简介

    Gulp.js简介 我们讨论了很多关于怎么减少页面体积,提高重网站性能的方法.有些是操作是一劳永逸的,如开启服务器的gzip压缩,使用适当的图片格式,或删除一些不必要的字符.但有一些任务是每次工作都必 ...

  4. “流式”前端构建工具——gulp.js 简介

    Grunt 一直是前端领域构建工具(任务运行器或许更准确一些,因为前端构建只是此类工具的一部分用途)的王者,然而它也不是毫无缺陷的,近期风头正劲的 gulp.js 隐隐有取而代之的态势.那么,究竟是什 ...

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

    原文:http://www.dbpoo.com/getting-started-with-gulp/ 所有功能前提需要安装nodejs(本人安装版本v0.10.26)和ruby(本人安装版本1.9.3 ...

  6. Gulp安装使用教程

    题记:为什么要使用gulp,网上有很多关于gulp的优势,而在我看来,这些都是工具的优势!工具的优势最主要体现在易用性上,听说gulp比grunt更易用,所以这里写个文档记录. 同样要保证nodejs ...

  7. Gulp安装流程、使用方法及cmd常用命令导览

    Gulp安装流程.使用方法及CMD常用命令导览 来自前端小白的gulp及周边知识学习总结 一.名词介绍: Npm--node包管理工具 一开始我不理解,包管理工具是什么鬼.后来用到的gulp也好,gu ...

  8. gulp安装及使用流程

    1. 安装nodejs 去 https://nodejs.org/en/下载安装文件安装即可. 安装完成后,在终端输入node -v回车打印出nodejs的版本号,说明nodejs安装成功. 在终端输 ...

  9. webmin安装简介

    webmin安装简介 Webmin是目前功能最强大的基于Web的Unix系统管理工具.管理员通过浏览器访问Webmin的各种管理功能并完成相应的管理动作.目前Webmin支持绝大多数的Unix系统,这 ...

随机推荐

  1. spring;maven;github;ssm;分层;timestamp;mvn;

    [说明]本来还想今天可以基本搭建一个合适的ssm环境呢,结果发现,,太特么复杂了,网上的例子有好多,看了好多,下面的评论或多或少都有说自己运行产生问题的,搞的我也不敢好好下载运行 [说明]没办法,将目 ...

  2. 浅谈命令查询职责分离(CQRS)模式---转载

    在常用的三层架构中,通常都是通过数据访问层来修改或者查询数据,一般修改和查询使用的是相同的实体.在一些业务逻辑简单的系统中可能没有什么问题,但是随着系统逻辑变得复杂,用户增多,这种设计就会出现一些性能 ...

  3. netbeans无法新建项目

    在ubuntu上安装netbeans最新版(7.3.1),但是安装之后发现无法新建项目,一直提示请等待,google之后说是jdk的问题,查看了一下jdk的版本为1.6.试着安装了1.7版本的,问题解 ...

  4. tfboys——tensorflow模块学习(一)

    Tensorflow的基本使用 TensorFlow 的特点: 使用图 (graph) 来表示计算任务. 在被称之为 会话 (Session) 的上下文 (context) 中执行图. 使用 tens ...

  5. 如何判断移动终端访问还是PC访问?

    我们经常需要知道访问网站的设备是移动终端还是PAD还是PC,下面给出判断的java代码供参考.实现的原理就是获取HTTP消息头里User-Agent和x-wap-profile,User-下面是Use ...

  6. 【Prometheus】第二篇---基本查询语法

    这几天忙着开发别的项目,今天抽空写一下Prometheus的查询语法 1,查看指标 直接输入指标名字就行了,grafana会自动补全 2,查看某个指标的使用率,比如cpu使用率 用到rate函数,ra ...

  7. 帝国cms数据表中文说明

    本文介绍下,帝国cms中各数据表的用途,有需要的朋友,参考下吧. 帝国cms各数据表及用途说明. phome_ecms_infoclass_news 新闻采集规则记录表 phome_ecms_info ...

  8. ThinkPHP中Widget的两种写法及调用

    Widget扩展一般用于页面组件的扩展,在页面根据需要输出不同的内容,下面介绍一下ThinkPHP中Widget的两种写法及调用 写法一: ArticlWidget.class.php文件: clas ...

  9. 0523 CSS知识点

    高级选择器分为:后代选择器.子代选择器.并集选择器.交集选择器 后代选择器 使用空格表示后代选择器.顾名思义,父元素的后代(包括儿子,孙子,重孙子) .father .item .a p{color: ...

  10. P4103 [HEOI2014]大工程

    题目 P4103 [HEOI2014]大工程 化简题目:在树上选定\(k\)个点,求两两路径和,最大的一组路径,最小的一组路径 做法 关键点不多,建个虚树跑一边就好了 \(sum_i\)为\(i\)子 ...