1.安装nodejs

安装省略

npm的全称是Node Package Manager,是随同NodeJS一起安装的包管理和分发工具,它很方便让JavaScript开发者下载、安装、上传以及管理已经安装的包。

2.cmd(npm)- 全局安装gulp

 npm install -g gulp

3.cmd(npm)- 进入项目路径,执行npm init ,生成package.json文件

 npm init -y

4.cmd(npm)- 在项目目录下开始本地安装gulp各种插件

 npm install gulp-jshint --save-dev  

gulp-concat、gulp-uglify、gulp-rename ..等.(--save-dev 是可以省掉你手动修改package.json文件的步骤,正常情况下得连同版本号手动将他们添加到模块配置文件)package.json中的依赖里

5.在项目目录下新建gulpfile.js文件,gulp有五种方法:taskrunwatchsrc,和dest.

gulpfile.js

//引入组件
var gulp = require('gulp'); var jshint = require('gulp-jshint');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');
var rename = require('gulp-rename');
var clean = require('gulp-clean');
var minify_css = require('gulp-minify-css'); //创建任务
gulp.task('hint',function(){
  return gulp.src(['a.js', 'b.js', 'c.js'])
  .pipe(jshint())
  .pipe(jshint.reporter('default'));
}); gulp.task('script', function () {
  return gulp.src(['a.js', 'b.js', 'c.js'])
    .pipe(concat('ABC.js'))
    .pipe(gulp.dest('application'))
    .pipe(uglify())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
}); gulp.task('css1', function () {
  return gulp.src('dist/css/d.css')
    .pipe(minify_css())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
}); gulp.task('css2', function () {
  return gulp.src(['dist/css/e.css', 'dist/css/f.css'])
    .pipe(concat('EF.css'))
    .pipe(gulp.dest('application'))
    .pipe(minify_css())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('application'));
}); gulp.task('watch', function () {
  gulp.watch(['a.js', 'b.js', 'c.js'], ['script']);
  gulp.watch('dist/css/d.css', ['css1']);
  gulp.watch(['dist/css/e.css', 'dist/css/f.css'], ['css2']);
}); gulp.task('clean', function () {
  return gulp.src('application', {read: false})
  .pipe(clean());
}); gulp.task('default', ['clean'], function () {
  gulp.run('hint','script', 'css1', 'css2', 'watch');
});

  

6.cmd(npm)- 执行任务

gulp default

  

 

Gulp 的简单使用(原创)的更多相关文章

  1. Gulp.js - 简单、直观的自动化项目构建工具

    Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...

  2. webpack gulp grunt 简单介绍

    本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...

  3. KA,连接池居然这么简单? 原创: 58沈剑 架构师之路 3月20日

    KA,连接池居然这么简单? 原创: 58沈剑 架构师之路 3月20日

  4. Gulp的简单使用

    我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...

  5. gulp的简单打包示例(一)

    引言 前端开发,打包工具是必不可少的,虽然有很多别人帮你封装好的打包工具,但自己配置一个,自身的实力也会大增呀.这篇博文主要讲的是使用gulp对html.js.less.css.图片的压缩合并等配置. ...

  6. gulp.js简单操作

    一.安装gulp 1.深入设置任务之前,需先安装gulp: $ npm install gulp -g 2.这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安 ...

  7. iOS-UICollectionView的简单使用(原创)

    前言 UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式).如果你用过iBook ...

  8. 利用gulp搭建简单服务器,gulp标准版

    var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀 rename = requir ...

  9. 自动化构建工具—gulp的简单配置

    把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保 ...

随机推荐

  1. npm -v;报错 cannot find module "wrapp"

    1.node -v正常.npm-v就报错.. 说明:在官网上下载了安装了好几次.一用到npm就报这个错.园友们,我不太懂node,你们遇到这个问题怎么解决的? 2.报错 cannot find mod ...

  2. php将html转为图片

    在服务器端解析将编译好的html转换为图片. 由于html一般由客户端浏览器解析,服务器端不能直接解析html代码.所以我们需要借助php类库及扩展完成这一需求. 文件转换过程为 html -> ...

  3. RandomAccessFile多线程下载、复制文件、超大文件读写

    最近在准备面试,翻了翻自己以前写的Demo,发现自己写了不少的工具包,今天整理了一下,分享给大家. 本文包含以下Demo: 1.常用方法测试 2.在文件中间插入一段新的数据 3.多线程下载文件 4.多 ...

  4. apache mysql无法启动解决办法

    最近在调试几个代码,需要不停的启动关闭服务器和mysql.在连续的几次开关后,无法启动了,每次启动后就直接关闭. 刚开始是怀疑是不是端口被占用了,查看端口后,并没有端口被占用的情况.查看mysql错误 ...

  5. PHP核心技术

    一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) <?php /** * 创建多级目录 * @param $path string 要创建的目录 * @param $m ...

  6. 企业级LNMP架构搭建实例(基于Centos6.x)

    1.1 部署LNMP架构说明 1.1.1 LNMP架构内容 01.部署linux系统 02.部署nginx网站服务 03.部署mysql数据库服务 04.部署php动态解析服务 1.1.2 配置LNM ...

  7. Taffy Web开发,Python Flask实践详解

    1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...

  8. 多版本VisualStudio导致的.net版本问题

      写在前面:本博文是在我现有知识状态下写的, 我现在是小白, 有错误欢迎指正. 以后假如接触到更合理的见解, 我一定会修正这篇博文的. 本文原是在我本地笔记中待着的, 写于2016/05/17. 下 ...

  9. Activiti源代码分析

    ExecutionEntity内部含有parent,是一个运行树或运行路径.应该是一个流程实例的运行过程,一个实例相应一个ExecutionEntity,通过getActivity得到的是当前正在运行 ...

  10. 诡异的 &quot;password取回&quot; 邮件问题

    大部分系统中都有"找回password"的功能,我们的平台也做了此功能,用户可通过 短信,邮件 找回password. 当中对于邮件找回password的方式遇到奇特的问题.记录下 ...