Gulp 的简单使用(原创)
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有五种方法:task
,run
,watch
,src
,和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 的简单使用(原创)的更多相关文章
- Gulp.js - 简单、直观的自动化项目构建工具
Gulp.js 是一个简单.直观的构建系统.崇尚代码优于配置,使复杂的任务更好管理.通过结合 NodeJS 的数据流的能力,你能够快速构建.通过简单的 API 接口,只需几步就能搭建起自己的自动化项目 ...
- webpack gulp grunt 简单介绍
本文主要是讲下webpack的相关知识点,理论比较多,因为webpack的功能非常强大,说到的也基本都是经常用到的. 这三个工具都属于前端自动化的工具,都是第三方的,并且国内很多大型团队也都有自己成熟 ...
- KA,连接池居然这么简单? 原创: 58沈剑 架构师之路 3月20日
KA,连接池居然这么简单? 原创: 58沈剑 架构师之路 3月20日
- Gulp的简单使用
我比较喜欢使用Gulp,因为简单好用! 今天的任务是:使用Gulp来压缩 jQuery源码,各输出一个压缩的和未压缩的版本 第一步:安装 cnpm install gulp --save-dev cn ...
- gulp的简单打包示例(一)
引言 前端开发,打包工具是必不可少的,虽然有很多别人帮你封装好的打包工具,但自己配置一个,自身的实力也会大增呀.这篇博文主要讲的是使用gulp对html.js.less.css.图片的压缩合并等配置. ...
- gulp.js简单操作
一.安装gulp 1.深入设置任务之前,需先安装gulp: $ npm install gulp -g 2.这会将gulp安装到全域环境下,让你可以存取gulp的CLI.接著,需要在本地端的专案进行安 ...
- iOS-UICollectionView的简单使用(原创)
前言 UICollectionView是一种新的数据展示方式,简单来说可以把他理解成多列的UITableView(请一定注意这是UICollectionView的最最简单的形式).如果你用过iBook ...
- 利用gulp搭建简单服务器,gulp标准版
var gulp = require('gulp'), autoprefixer = require('gulp-autoprefixer'), //自动添加css前缀 rename = requir ...
- 自动化构建工具—gulp的简单配置
把之前用到的gulp总结整理下,有时候说不出来的,就写出来吧,做个笔记,以后也可以慢慢补充 cnpm i --save-dev gulp 把nodejs模块写到package.json配置文件中,当保 ...
随机推荐
- npm -v;报错 cannot find module "wrapp"
1.node -v正常.npm-v就报错.. 说明:在官网上下载了安装了好几次.一用到npm就报这个错.园友们,我不太懂node,你们遇到这个问题怎么解决的? 2.报错 cannot find mod ...
- php将html转为图片
在服务器端解析将编译好的html转换为图片. 由于html一般由客户端浏览器解析,服务器端不能直接解析html代码.所以我们需要借助php类库及扩展完成这一需求. 文件转换过程为 html -> ...
- RandomAccessFile多线程下载、复制文件、超大文件读写
最近在准备面试,翻了翻自己以前写的Demo,发现自己写了不少的工具包,今天整理了一下,分享给大家. 本文包含以下Demo: 1.常用方法测试 2.在文件中间插入一段新的数据 3.多线程下载文件 4.多 ...
- apache mysql无法启动解决办法
最近在调试几个代码,需要不停的启动关闭服务器和mysql.在连续的几次开关后,无法启动了,每次启动后就直接关闭. 刚开始是怀疑是不是端口被占用了,查看端口后,并没有端口被占用的情况.查看mysql错误 ...
- PHP核心技术
一.PHP核心技术 1.写出一个能创建多级目录的PHP函数(新浪网技术部) <?php /** * 创建多级目录 * @param $path string 要创建的目录 * @param $m ...
- 企业级LNMP架构搭建实例(基于Centos6.x)
1.1 部署LNMP架构说明 1.1.1 LNMP架构内容 01.部署linux系统 02.部署nginx网站服务 03.部署mysql数据库服务 04.部署php动态解析服务 1.1.2 配置LNM ...
- Taffy Web开发,Python Flask实践详解
1. 前言 最近为Taffy自动化测试框架写了个页面,主要实现了用例管理.执行,测试报告查看管理.发送邮件及配置等功能. 2. 实现细节 页面使用Python Flask +Bootstrap开发,还 ...
- 多版本VisualStudio导致的.net版本问题
写在前面:本博文是在我现有知识状态下写的, 我现在是小白, 有错误欢迎指正. 以后假如接触到更合理的见解, 我一定会修正这篇博文的. 本文原是在我本地笔记中待着的, 写于2016/05/17. 下 ...
- Activiti源代码分析
ExecutionEntity内部含有parent,是一个运行树或运行路径.应该是一个流程实例的运行过程,一个实例相应一个ExecutionEntity,通过getActivity得到的是当前正在运行 ...
- 诡异的 "password取回" 邮件问题
大部分系统中都有"找回password"的功能,我们的平台也做了此功能,用户可通过 短信,邮件 找回password. 当中对于邮件找回password的方式遇到奇特的问题.记录下 ...