gulp学习-gulpfile
安装gulp
假设已经安装了node 和npm (淘宝的cnpm很适合国内使用)。
1、首页全局安装gulp。
1 npm install --global gulp
2、其次局部安装gulp。(注:局部安装是安装到你项目的根目录,这是很多教程没有清晰表明)
npm install gulp --save-dev
3、在项目根目录下创建一个名为 gulpfile.js
的文件
var gulp = require('gulp'); gulp.task('default', function() {
// 将你的默认的任务代码放在这
});
4、运行gulp。(默认的名为 default 的任务(task)将会被运行,想要单独执行特定的任务(task),请输入 gulp <task> <othertask>)
gulp
合并和压缩JS、CSS文件
压缩JS,CSS文件需要引用如下组件:
gulp-minify-css: 压缩css
gulp-jshint: 检查js
gulp-uglify: 压缩js
gulp-concat: 合并文件
gulp-rename: 重命名文件
gulp-clean: 清空文件夹
gulp-notify:提示
安装组件项目目录,通过cd 进入项目的根目录,执行下边的npm安装组件
npm install gulp-minify-css gulp-jshint gulp-uglify gulp-rename gulp-concat gulp-clean gulp-notify --save-dev
在上述 gulpfile.js
的文件里,写入:
// 引入 gulp及组件
var gulp=require('gulp'), //gulp基础库
minifycss=require('gulp-minify-css'), //css压缩
concat=require('gulp-concat'), //合并文件
uglify=require('gulp-uglify'), //js压缩
rename=require('gulp-rename'), //文件重命名
jshint=require('gulp-jshint'), //js检查
notify=require('gulp-notify'); //提示
gulp.task('default',function(){
gulp.start('minifycss','minifyjs');
});
//css处理
gulp.task('minifycss',function(){
return gulp.src('htdocs/kunpeng/static/css/*.css') //设置css
.pipe(concat('order_query.css')) //合并css文件到"order_query"
.pipe(gulp.dest('dist/styles')) //设置输出路径
.pipe(rename({suffix:'.min'})) //修改文件名
.pipe(minifycss()) //压缩文件
.pipe(gulp.dest('dist/styles')) //输出文件目录
.pipe(notify({message:'css task ok'})); //提示成功
});
//JS处理
gulp.task('minifyjs',function(){
return gulp.src(['/static/js/juicer-min.js','/static/js/bootstrap.min.js','/static/js/bootstrap-datetimepicker.min.js','/static/js/order_query.js']) //选择合并的JS
.pipe(concat('order_query.js')) //合并js
.pipe(gulp.dest(''dist/js')) //输出
.pipe(rename({suffix:'.min'})) //重命名
.pipe(uglify()) //压缩
.pipe(gulp.dest('dist/js')) //输出
.pipe(notify({message:"js task ok"})); //提示
});
gulp学习-gulpfile的更多相关文章
- gulp学习笔记1
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.安装gulp 首先我们需要node环境,nodejs安装这里就不说了,不懂的 ...
- gulp学习笔记2
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1. 压缩 CSS 压缩 css 代码可降低 css 文件大小,提高页面打开速度 ...
- gulp学习笔记3
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 1.编译sass Sass 是一种 CSS 的开发工具,提供了许多便利的写法,大 ...
- Gulp 学习总结
Gulp 自动化工具开发非常方便,便于上手,值得使用. 一.Gulp安装 gulp是基于NodeJS运行的,所以需要想安装NodeJS. http://nodejs.org/download/ 安装 ...
- gulp学习-metamask前端使用
https://www.gulpjs.com.cn/docs/getting-started/ ,这个是3.9.0版本 后面发现安装的版本是4.0.0,看下面这个: https://github.co ...
- gulp学习笔记4
gulp系列学习笔记: 1.gulp学习笔记1 2.gulp学习笔记2 3.gulp学习笔记3 4.gulp学习笔记4 之前的任务都是单个的,比较简单.接下去我们开始引用多个插件,一次性把任务搞定,省 ...
- Gulp学习指南之CSS合并、压缩与MD5命名及路径替换(转载)
本文转载自: Gulp学习指南之CSS合并.压缩与MD5命名及路径替换
- gulp 学习笔记
以这次学习gulp为契机来同时了解和学习node相关的知识和概念,比如 npm,package.json等,为以后学习node打好基础. 目录 npm 查看模块 安装模块 ...
- 前端自动化构建工具 gulp 学习笔记 一、
一.我对gulp的初期理解 是一种前端辅助开发工具 可以帮你把js,css,img等文件 合并.压缩,图片好像是合并为精灵图,合并为精灵图之后,还会生成一个css样式表. 官方解说是:基于流的自动化构 ...
随机推荐
- Mysql两个引擎对比
Mysql两个引擎对比 MyIsam 优点: 1.支持B-Tree检索和文本全文检索 2.性能消耗方面相对较低 3.支持全表(table)锁 缺点: ...
- 如何在sublime text上快速访问html页面?
第一步.安装package control和安装sidebarenhancements插件 原来Subl3安装Package Control很麻烦,现在简单的方法来了 使用Ctrl+`快捷键或者通过V ...
- grails 优缺点分析
Grails是一套用于快速Web应用开发的开源框架,它基于Groovy编程语言,并构建于Spring.Hibernate等开源框架之上,是一个高生产力一站式框架. 易于使用的基于Hibernate的对 ...
- matlab中pcolorh函数作用
就是说X,Y是用来定位的,C是用来填充颜色的.参数C要求至少是一个矩阵,而参数X,Y可以是向量,也可以是矩阵.当X,Y是向量时,X与C的行对应,Y与C的列对应,因此向量X与Y的维数必须要求与C的行与列 ...
- python gettitle v2.0
#!/usr/bin/env python # coding=utf-8 import threading import requests import Queue import sys import ...
- 二叉排序树(BST)创建,删除,查找操作
binary search tree,中文翻译为二叉搜索树.二叉查找树或者二叉排序树.简称为BST 一:二叉搜索树的定义 他的定义与树的定义是类似的,也是一个递归的定义: 1.要么是一棵空树 2.如果 ...
- 用pyspider爬淘宝MM照片
#!/usr/bin/env python # -*- encoding: utf-8 -*- # Created on 2016-12-09 15:24:54 # Project: taobaomm ...
- .net 高效开发实用工具
Visual Studio Visual Studio Productivity Power tool: VS 专业版的效率工具. Web Essentials: 提高开发效率,能够有效的帮助开发人员 ...
- 【原创】JEECMS v6~v7任意文件上传漏洞(1)
文章作者:rebeyond 受影响版本:v6~v7 漏洞说明: JEECMS是国内Java版开源网站内容管理系统(java cms.jsp cms)的简称.该系统基于java技术开发,继承其强大.稳定 ...
- 使用django开发博客过程记录1——数据库设计
1.数据库设计 2.插入测试数据 3.配置相关问题 1.数据库设计 数据库有简单的三张表:Article.Category.Tag以下是代码 # -*- coding:utf-8 -*- from _ ...