1.首先要先装node.然后在命令行里安装全局的gulp:  

npm install --global gulp

这是gulp在的生成的位置

2.接下来,我们需要将gulp安装到项目本地

npm install —-save-dev gulp

这里,我们使用 —-save-dev 来更新package.json文件,更新 devDependencies值,以表明项目需要依赖gulp。

Dependencies 可以向其他参与项目的人指明项目在开发环境和生产环境中的node模块依懒关系,想要更加深入的了解它可以看看 package.json文档 。

3.接下来加载gulp的插件,我现在主要是压缩 ,下面装了三个插件,分别是合并,最小化和混淆。

4.在项目的中创建gulpfile.js

var gulp = require('gulp'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
del = require('del') gulp.task('js',function(){
return gulp.src('./routes/*.js') //有的JavaScript文件,然后排除后缀为.min.js的文件: gulp.src(['js/**/*.js', '!js/**/*.min.js'])
.pipe(uglify()) //取消文件缩进
.pipe(concat('app.js')) //合并
.pipe(gulp.dest('dist/js')) //保存为build/app.js
}) /*gulp.task('clean',function(cb){
del(['dist/js'],cb)
})*/ gulp.task('default',function(){
  // 将你的默认的任务代码放在这
gulp.start('js')
})

5.然后运行

GULP入门(一)的更多相关文章

  1. Gulp入门教程(转载)

    本人转载自: Gulp入门教程

  2. (转)前端构建工具gulp入门教程

    前端构建工具gulp入门教程 老婆婆 1.8k 2013年12月30日 发布 推荐 10 推荐 收藏 83 收藏,20k 浏览 本文假设你之前没有用过任何任务脚本(task runner)和命令行工具 ...

  3. 《Gulp 入门指南》 : 使用 gulp 压缩 JS

    <Gulp 入门指南> : 使用 gulp 压缩 JS 请务必理解如下章节后阅读此章节: 安装 Node 和 gulp 访问论坛获取帮助 压缩 js 代码可降低 js 文件大小,提高页面打 ...

  4. Gulp入门与解惑

    Gulp简介 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.Gulp.js是基于 Node.js构建的,利用Node.js流的威力,你可以快速构建项目. 安装 ...

  5. gulp 入门使用

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

  6. 【转】Gulp入门基础教程

    Gulp入门基础教程 原文在此 前言最近流行前端构建工具,苦于之前使用Grunt,代码很难阅读,现在出了Gulp, 真是摆脱了痛苦.发现了一篇很好的Gulp英文教程,整理翻译给大家看看. 为什么使用G ...

  7. gulp入门与一些基本设置

    这里是gulp入门的一些操作,实现了编译sass文件.压缩.合并.添加版本号等基本功能. 友情提示,如果npm出现无法下载可以安装 cnpm.在安装完Nodejs 后 npm install cnpm ...

  8. gulp入门演练

    一直想学习下gulp看了蛮多资料,然后总是感觉是是而非,突然开窍了,把自己学会的过程给大家分享下,入门超级简单的 gulp安装 安装gulp 如果参数-g 表示全局安装 $ npm install g ...

  9. 前端小白的gulp入门

    gulp新手入门 全局安装 cnpm install -g gulp 本地安装cnpm install gulp -D 如果项目没有package.json,记得npm init 安装插件cnpm i ...

  10. gulp入门学习教程(入门学习记录)

    前言 最近在通过教学视频学习angularjs,其中有gulp的教学部分,对其的介绍为可以对文件进行合并,压缩,格式化,监听,测试,检查等操作时,看到前三种功能我的心理思想是,网上有很多在线压缩,在线 ...

随机推荐

  1. svn+post-commit实现自动部署(转)

    一.安装 #yum install subversion 检查是否安装了svn #subversion –v 创建svn库和对应的目录 #mkdir /svn/www.test.com #svnadm ...

  2. <scrapy爬虫>基本操作

    scrapy选择器的用法 //selector可以加可以不加 response.selector.xpath("//title/text()").extract_first() r ...

  3. java_新特性未整理

    得到的.className method.isAnnotationPresent:判断是否有指定的注解,注解.class method.invoke:执行 */}

  4. java_打印流

    public class transientTest { /** * 反序列化操作2 * 序列化后的文件被修改后进行反序列化时会报错 * 决绝方法: * 手动添加序列号Serializable中有声明 ...

  5. C++自己用模板减少工作量

    今天写代码,遇到这样一个类似如下的需求: auto componentClassSavedByPLC = std::make_shared<ComponentClassSavedByPLC> ...

  6. android 中的一些小问题

    1 TextView 在TableRow 中占满一行 要为TextView设置 android:layout_weight="1" 这个属性 2

  7. leetcode-106-从中序和后序遍历构造二叉树

    题目描述: 方法一:O(n) O(n) class Solution: def buildTree(self, inorder: List[int], postorder: List[int]) -& ...

  8. Tomasulo algorithm

    https://en.wikipedia.org/wiki/Tomasulo_algorithm#Applications_and_legacy 1,  what is Tomasulo algori ...

  9. thinkphp 动态查询

    借助PHP5语言的特性,ThinkPHP实现了动态查询,核心模型的动态查询方法包括下面几种: 方法名 说明 举例 getBy 根据字段的值查询数据 例如,getByName,getByEmail ge ...

  10. FreeMarker 自定义 TemplateDirectiveModel(二)

    FreeMarker 是一个用 Java 语言编写的模板引擎,它基于模板来生成文本输出.FreeMarker 与 Web 容器无关,即在 Web 运行时,它并不知道 Servlet 或 HTTP.它不 ...