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. node-webkit笔记

    两个月前给一个运营站点做了个封皮,今天再做竟然忘了怎么搞了...为之文以志. 流程参考: http://www.cnblogs.com/2050/p/3543011.html 相关命令: copy / ...

  2. ubuntu install redis/mongo 以及 监控安装

    sudo apt-get updatesudo apt-get install redis-server mongodb sudo apt-get install htopsudo apt-get i ...

  3. 【bzoj 3489】A simple rmq problem

    题目 \(kdt\)就是数点神器 我们先扫两遍处理出每个数上一次出现的位置\(pre_i,nxt_i\),之后变成\((i,pre_i,nxt_i)\)这样一个三维空间上的点 就变成了求一个立方体的最 ...

  4. 2019-11-7-C#-dotnet-线程不安全的弱引用缓存

    title author date CreateTime categories C# dotnet 线程不安全的弱引用缓存 lindexi 2019-11-7 9:45:5 +0800 2019-11 ...

  5. leetcode 131 Palindrome Pairs

    lc131 Palindrome Pairs 解法1: 递归 观察题目,要求,将原字符串拆成若干子串,且这些子串本身都为Palindrome 那么挑选cut的位置就很有意思,后一次cut可以建立在前一 ...

  6. Linux System命令

    http://blog.csdn.net/cheyo/article/details/6595955 #include <stdio.h> #include <stdlib.h> ...

  7. STL vector容器需要警惕的一些坑

    从迭代器中取值切记需要判断是否为空 例如: vector<int> vtTest; vtTest.clear(); if (vtTest.empty()){ ; } ]; 如果没有忘了判断 ...

  8. Nginx 和 Gunicorn 部署 Django项目

    目录 Nginx 和 Gunicorn 部署 Django项目 配置Nginx 安装配置Gunicorn 通过命令行直接启动 Gunicorn 与 uwsgi 的区别,用哪个好呢 Gunicorn u ...

  9. pandas的使用方法

    一.基本使用方法 # pandas引入约定 import pandas as pd from pandas import Series,DataFrame import numpy as np imp ...

  10. call和apply的应用

    相同点 都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行 var arrayLike = { 0: 'item1', 1: 'item2', 2: 'ite ...