1.安装gulp

cnpm install -g gulp;

2.然后还需要在当前目录安装gulp,具体不详,只知道安装了之后会在当前目录下的node_modules下多一个gulp文件夹

cnpm install gulp --save-dev

有哪位大神知道的还望指导

3.创建package.json,可以cnpm init或者自己手动写,内容如下

{
"name": "gulptest",
"version": "1.0.0",
"description": "description",
"main": "gulpfile.js",
"dependencies": {
"gulp": "^3.9.0",
"gulp-rename": "^1.2.2",
"gulp-jshint": "^1.11.2",
"gulp-concat": "^2.6.0",
"gulp-uglify": "^1.4.0",
"gulp-util": "^1.0.0"
},
"devDependencies": {
"gulp": "^3.9.0"
},
"scripts": {
"test": "test command"
},
"repository": {
"type": "git",
"url": "git repository"
},
"keywords": [
"keywords"
],
"author": "author",
"license": "ISC"
}

4.安装相关的依赖

cnpm install

5.创建gulpfile.js,内容如下

var gulp    = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat'); gulp.task('concat', function () {
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
}); gulp.task('default', ['concat']);

6.执行gulp,将看到以下结果

gulp之demo的更多相关文章

  1. 使用gulp来构建一个前端项目

    什么是gulp? gulp是一个前端项目构建工具,是自动化项目的构建利器,它不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成.你可以使用gulp及其插件对你的项目代码 ...

  2. 给资源文件添加指纹(Gulp版)

    至于为什么要费尽心思地给文件添加指纹,请参看前端静态资源缓存控制策略.这次要达到的小目标就是生成的资源文件能够被客户端缓存,而在文件内容变化后,能够请求到最新的文件. 需要用到的 gulp 插件是 g ...

  3. gulp 入门使用

      gulp 入门使用 使用场景 相信大家在传统的开发模式下 都是 html + css + js 然后静态文件不经过任何处理 部署到服务器,这样会有很多漏洞例如: 1.在网站上查看F12 就可以看到 ...

  4. gulp前端工程化教程

    gulp npm install -g gulp-concat 文件打包 npm install -g gulp-rename 文件重命名 npm install -g gulp-imagemin 图 ...

  5. 一篇迟到的gulp文章,代码合并压缩,less编译

    前言 这篇文章本应该在去年17年写的,但因为种种原因没有写,其实主要是因为懒(捂脸).gulp出来的时间已经很早了,16年的时候还很流行,到17年就被webpack 碾压下去了,不过由于本人接触gul ...

  6. Gulp实例(包括环境搭建的自动检测)

    # Gulp实例(包括环境搭建的自动检测) Gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.下面我将完成如下的功能点并且附上源码: CSS文件打包 less文件打包 s ...

  7. 写GULP遇到的ES6问题详解

    Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.最近复习一下gulp一些基本的写法,在写了一些简单的uglify,rename,concat,clean的处理之 ...

  8. AngularJs--angular-pagination可复用的分页指令

    1.angular-pagination 是基于angular 编写的可复用分页指令 安装 克隆项目到本地: git clone https://github.com/febobo/angular-p ...

  9. gulp-prompt入个了门

    gulp-prompt版本:0.4.1 源码:gulp-prompt 一.gulp-prompt的简介 gulp-prompt 是一个基于gulp的命令行提示. 我们可以用它来完成命令行中互动功能. ...

随机推荐

  1. Mybatis基本入门搭建

    一:Mybatis框架概述 1:什么是Mybatis 官方定义: MyBatis 是一款优秀的持久层框架,它支持自定义 SQL.存储过程以及高级映射.MyBatis 免除了几乎所有的 JDBC 代码以 ...

  2. KVM在线扩展虚拟机内存

    环境介绍 在KVM下有一台虚拟机内存不够需要扩展内存.宿主机地址是192.168.1.28.我需要扩展的虚拟机是centos1708vm03. 1.登陆上宿主机查看虚拟机配置 virsh dumpxm ...

  3. RocketMQ系列(三)消息的生产与消费

    前面的章节,我们已经把RocketMQ的环境搭建起来了,是一个两主两从的异步集群.接下来,我们就看看怎么去使用RocketMQ,在使用之前,先要在NameServer中创建Topic,我们知道Rock ...

  4. kibana的Dev Tool中如何对es进行增删改查

    kinaba Dev Tool中对es(elasticSearch)进行增删改查 一.查询操作 查询语句基本语法 以下语句类似于mysql的: select * from  xxx.yyy.topic ...

  5. 6、react中的交互

    1.ajax 再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的 ...

  6. [web][学习随笔]php中http post&get数据传输

    GET <!--客户端发送--> <form id="form1" action="doGet.php" method="get&q ...

  7. [xDebug] 服务器端的配置参数

    [Xdebug] ;load xdebug extensionzend_extension_ts = path/tp/xdebug;是否开启自动跟踪xdebug.auto_trace = On;是否开 ...

  8. RabbitMQ是什么

    1.引入MQ 1.1什么是MQ ​ MQ(Message Quene):翻译为 消息队列,通过典型的 生产者 和 消费者 模型,生产者不断向消息队列中生产消息,消费者不断的从队列中获取消息.因为消息的 ...

  9. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

  10. maven配置错误之Unable to import maven project: See logs for details

    很多朋友在初次使用maven时,都会出现这个问题. 一加载maven项目,即会报出Unable to import maven project这样的错误,哪怕是新的maven项目也不例外. 我查阅了很 ...