gulp的安装和使用
安装nodejs -> 全局安装gulp -> 项目安装gulp以及gulp插件 -> 配置gulpfile.js -> 运行任务
1、去nodejs官网安装nodejs
2、打开命令行,OSX是终端,windows是命令提示符(window + r 输入cmd回车)
3、使用npm(nodejs的包管理器),或选装cnpm执行npm install cnpm -g --registry=https://registry.npm.taobao.org
4、全局安装gulp:(c)npm install gulp -g
5、新建package.json到项目根目录【非必选】(josn文件需删除注释,此用来记录项目信息和配置初始插件)
1 {
2 "name": "test", //项目名称(必须)
3 "version": "1.0.0", //项目版本(必须)
4 "description": "This is for study gulp project !", //项目描述(必须)
5 "homepage": "", //项目主页
6 "repository": { //项目资源库
7 "type": "git",
8 "url": "https://git.oschina.net/xxxx"
9 },
10 "author": { //项目作者信息
11 "name": "surging",
12 "email": "surging2@qq.com"
13 },
14 "license": "ISC", //项目许可协议
15 "devDependencies": { //项目依赖的插件
16 "gulp": "^3.8.11",
17 "gulp-less": "^3.0.0"
18 }
19 }
6、本地项目安装,命令行定位项目目录后执行:(c)npm install --save-dev(根据package.json的配置,安装组件到项目)
若忽略第五步,则这里只执行:(c)npm install gulp --save-dev(仅安装gulp到项目)
7、安装需要的gulp组件(绿色部分为需要安装的组件)另sass编译需提前安装ruby。(如第五步配置完成,此步忽略)
npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev
8、新建gulpfile.js【必选重要】
1 /*!
2 * gulp
3 * $ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-css-spriter gulp-jshint gulp-uglify gulp-imagemin gulp-rename gulp-concat gulp-htmlmin gulp-notify gulp-cache gulp-livereload --save-dev
4 */
5 // 加载插件
6 var gulp = require('gulp'),//加载gulp
7 sass = require('gulp-sass'),//编译sass
8 autoprefixer = require('gulp-autoprefixer'),//补全浏览器前缀
9 minifycss = require('gulp-minify-css'),//压缩css为min
10 spriter = require('gulp-css-spriter'),//图片合并css精灵
11 jshint = require('gulp-jshint'),//js查错
12 uglify = require('gulp-uglify'),//压缩js
13 imagemin = require('gulp-imagemin'),//压缩图片
14 rename = require('gulp-rename'),//重命名gulp
15 concat = require('gulp-concat'),//合并js
16 html = require('gulp-htmlmin'),//压缩HTML
17 notify = require('gulp-notify'),//显示信息
18 cache = require('gulp-cache'),//压缩图片过滤(仅修改图片压缩)
19 livereload = require('gulp-livereload');// 网页自动刷新
20
21 //处理样式
22 gulp.task('styles', function() { var timestamp = +new Date();
23 return gulp.src('style/**/*.scss')//表示css及子文件夹中的所以文件
24 .pipe(sass())
25 .pipe(autoprefixer({browsers:['last 3 versions','ie >= 10','ie_mob >= 10','ff >= 30','chrome >= 34','safari >= 6','opera >= 12.1','ios >= 6','android >= 4.4','bb >= 10','and_uc 9.9']}))//支持浏览器种类
26 .pipe(rename({ suffix: '.min' }))//重命名加min后缀
27 // .pipe(spriter({
28 // 'spriteSheet': 'images/sprite'+timestamp+'.png',// 生成的spriter的位置
29 // 'pathToSpriteSheetFromCSS': '../images/sprite'+timestamp+'.png'// 生成样式文件图片引用地址的路径,如:backgound:url(../images/sprite20324232.png)
30 // }))
31 .pipe(minifycss({keepBreaks: true}))//分行显示
32 .pipe(gulp.dest('css'))//保存到指定目录
33 .pipe(notify({ message: 'Styles task complete' }));//打印信息
34 });
35
36 ////图片精灵
37 //gulp.task('spriter',function() {
38 // var timestamp = +new Date();
39 // //需要自动合并雪碧图的样式文件
40 // return gulp.src('css/*.css')
41 // .pipe(spriter({
42 // // 生成的spriter的位置
43 // 'spriteSheet': 'images/sprite'+timestamp+'.png',
44 // // 生成样式文件图片引用地址的路径,如:backgound:url(../images/sprite20324232.png)
45 // 'pathToSpriteSheetFromCSS': 'images/sprite'+timestamp+'.png'
46 // }))
47 // .pipe(minifycss())
48 // .pipe(gulp.dest('css'));
49 //});
50
51
52 //处理js
53 gulp.task('scripts', function() {
54 return gulp.src('script/**/*.js')
55 .pipe(jshint())
56 .pipe(jshint.reporter('default'))
57 //.pipe(concat('all.js'))
58 .pipe(rename({ suffix: '.min' }))
59 .pipe(uglify())
60 .pipe(gulp.dest('js'))
61 .pipe(notify({ message: 'Scripts task complete' }));
62 });
63
64
65 //处理图片
66 //gulp.task('images', function() {
67 // return gulp.src(['pic/**/*.png','pic/**/*.jpg'])
68 // .pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
69 // .pipe(gulp.dest('images'))
70 // .pipe(notify({ message: 'Images task complete2' }));
71 //});
72
73 //默认执行
74 gulp.task('default', function() {
75 gulp.start('styles', 'scripts');
76 });
77
78 // 监测变更执行gulp
79 gulp.task('watch', function() {
80 gulp.watch('style/**/*.scss', ['styles']);//处理样式
81 gulp.watch('script/**/*.js', ['scripts']);//处理js
82 //gulp.watch('pic/**', ['images']);//处理图片
83 // Create LiveReload server
84 livereload.listen();
85 // Watch any files in assets/, reload on change
86 gulp.watch(['style/**/*.scss','script/**/*.js']).on('change', livereload.changed);
87 });
9、执行gulp,命令行指定项目目录后执行:gulp+回车=进行单次编译
10、gulp watch监听文件修改自动执行,Ctrl+C停止监听
以上内容来自网络整理及实际操作,如有不当欢迎讨论
- Android Studio快捷键每日一练(4)
- Android Studio快捷键每日一练(3)
- 一分钟教你在博客园中制作自己的动态云球形标签页
- Python标准库06 子进程 (subprocess包)
- 摩拜、美团也伸手共享汽车拉!众多品牌里面,这三家最牛!
- Android Studio快捷键每日一练(2)
- Linux进程间通信
- Android Studio快捷键每日一练(1)
- Android开发中的全屏背景显示方案
- Android中的FragmentManager的问题
- Premiere Pro & After Effects插件开发调试方法
- RegQueryValueEx正确使用方法
- 区块链+医疗五类应用前景广阔,英美已有企业试水
- Linux进程关系
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- jquery param 数据 数组参数序列化
- 3 CPU缓存一致性协议MESi
- 4. synchronized详解
- 4.2 synchronized补充
- 解决 Maven 使用Tomcat 部署报错 Tomcat return http status error: 405, Reason Phrase: Method Not Allowed:
- spring5源码 -- IOC容器设计理念和核心注解的作用
- 1. spring5源码 -- Spring整体脉络 IOC加载过程 Bean的生命周期
- Cookie详解
- 2.1 Spring5源码--源码编译
- WebLogic 10 容器通过JNDI切换数据源
- 2.2 spring5源码 -- ioc加载的整体流程
- Js 删除 指定Domin 指定 path 下的 cookie中指定的内容
- 适配器模式与装饰器模式的区别
- java堆内存详解
- springBoot 入门(一)—— 使用idea创建第一个springBoot项目