Ionic学习笔记三 Gulp在ionic中的使用
简介
Gulp是一个基于流的自动化构建器。
安装
npm config set registry http://registry.npm.taobao.org ---最好用国内源
npm install -g gulp
npm install --save-dev gulp
创建文件 gulpfile.js
var gulp = require('gulp'); gulp.task('default', function() {
// place code for your default task here
});
运行
gulp
安装插件
sudo npm install gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-clean gulp-notify gulp-rename gulp-livereload gulp-cache gulp-ng-annotate yargs--save-dev
功能说明:
编译Sass (gulp-ruby-sass)
Autoprefixer (gulp-autoprefixer)
缩小化(minify)CSS (gulp-minify-css)
JSHint (gulp-jshint)
拼接 (gulp-concat)
丑化(Uglify) (gulp-uglify)
图片压缩 (gulp-imagemin) --这个插件实际使用中可能会有一些问题
即时重整(LiveReload) (gulp-livereload)
清理档案 (gulp-clean)
图片快取,只有更改过得图片会进行压缩 (gulp-cache)
更动通知 (gulp-notify)
更多插件清单:http://gratimax.github.io/search-gulp-plugins/
jshint插件基本用法:
var jshint = require('gulp-jshint');
var gulp = require('gulp'); gulp.task('lint', function() {
return gulp.src('./lib/*.js')
.pipe(jshint())
.pipe(jshint.reporter('YOUR_REPORTER_HERE'));
});
比较全的用法:
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/assets/js'))
.pipe(rename({suffix: '.min'}))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
Ionic 项目中使用gulp
ionic本身带了gulp,其脚本在生成的项目ionic目录下。
原始内容如下:
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
var sh = require('shelljs'); var paths = {
sass: ['./scss/**/*.scss']
}; gulp.task('default', ['sass']); gulp.task('sass', function(done) {
gulp.src('./scss/ionic.app.scss')
.pipe(sass({
errLogToConsole: true
}))
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({ extname: '.min.css' }))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
}); gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
}); gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
}); gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
首先,在项目加入gulp。下面命令是分开写的,也可以合并一次性安装。
npm install --save-dev gulp
npm install gulp-util --save-dev
npm install brow --save-dev
npm install bower --save-dev
npm install gulp-concat --save-dev
npm install gulp-sass --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-rename --save-dev
npm install shelljs --save-dev
npm install gulp-jshint --save-dev
npm install gulp-uglify --save-dev
npm install gulp-notify --save-dev
npm install gulp-minify-html --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-cache --save-dev
npm install gulp-cond --save-dev
npm install yargs --save-dev
npm install gulp-ng-annotate --save-dev
根据条件判断编译方式
gulp-cond
gulp-imagemin遇到的一个问题的处理
No path specified! Can not get relative.
需要加一句:
gulp.task('img',function(){ gulp.src(extensArray(['png','jpg','gif'])) .pipe($.filter('*.{jpg,jpeg,svg,gif,png}')) //加这一句 .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))) .pipe(gulp.dest(target_path )); });
gulp.src("*.js")
.pipe(cond(is_release, uglify({compress:false})))
.pipe(gulp.dest(target_path+path.js));
接收命令行参数:
gulp.env
gulp --key 111 --value 222
gulp.env的值:
gulp.env: { _: [], key: 111, value: 222 }
gulp.env已经过时,可使用yargs
npm install yargs --save-dev
使用:
var argv = require('yargs').argv; gulp.task('my-task', function() {
return gulp.src(argv.a == 1 ? options.SCSS_SOURCE : options.OTHER_SOURCE)
.pipe(sass({style:'nested'}))
.pipe(autoprefixer('last 10 version'))
.pipe(concat('style.css'))
.pipe(gulp.dest(options.SCSS_DEST));
});
判断文件是否存在
var fs = require(‘fs’);
fs.stat(file, function (err, stat) {
if (err != null) {
console.log('输入的参数错误。错误代码:', err.code);
process.exit(0);
} else {
}
});
Ionic学习笔记三 Gulp在ionic中的使用的更多相关文章
- [ 原创 ]学习笔记-三种向ListView中填充简单文本的方法
Android 中ListView是很重要的一块内容 掌握ListView的基本用法 对学习安卓起着举足轻重的作用 今天就介绍一下三种向ListView 填充简单文本的方法 填充其他数据类型的用法之后 ...
- C#线程学习笔记三:线程池中的I/O线程
本笔记摘抄自:https://www.cnblogs.com/zhili/archive/2012/07/20/MultiThreads.html,记录一下学习过程以备后续查用. 一.I/O线 ...
- MyBatis学习笔记(三)——优化MyBatis配置文件中的配置
转自孤傲苍狼的博客:http://www.cnblogs.com/xdp-gacl/p/4264301.html 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的 ...
- Oracle学习笔记三 SQL命令
SQL简介 SQL 支持下列类别的命令: 1.数据定义语言(DDL) 2.数据操纵语言(DML) 3.事务控制语言(TCL) 4.数据控制语言(DCL)
- [Firefly引擎][学习笔记三][已完结]所需模块封装
原地址:http://www.9miao.com/question-15-54671.html 学习笔记一传送门学习笔记二传送门 学习笔记三导读: 笔记三主要就是各个模块的封装了,这里贴 ...
- JSP学习笔记(三):简单的Tomcat Web服务器
注意:每次对Tomcat配置文件进行修改后,必须重启Tomcat 在E盘的DATA文件夹中创建TomcatDemo文件夹,并将Tomcat安装路径下的webapps/ROOT中的WEB-INF文件夹复 ...
- java之jvm学习笔记三(Class文件检验器)
java之jvm学习笔记三(Class文件检验器) 前面的学习我们知道了class文件被类装载器所装载,但是在装载class文件之前或之后,class文件实际上还需要被校验,这就是今天的学习主题,cl ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- Java IO学习笔记三
Java IO学习笔记三 在整个IO包中,实际上就是分为字节流和字符流,但是除了这两个流之外,还存在了一组字节流-字符流的转换类. OutputStreamWriter:是Writer的子类,将输出的 ...
随机推荐
- 用php获取本周,上周,本月,上月,本季度日期的代码
echo date("Ymd",strtotime("now")), "\n"; echo date("Ymd",str ...
- VScode调试Python
第一步,确保装上了PYTHON扩展 然后打开文件夹(这个东西必须打开文件夹才能进行调试,不能打开一个文件就调试) 打开文件夹后,那里显示没有配置,这时需要你按下F5 弹出选择环境,点击Python 它 ...
- php 循环删除目录中的过期文件
$savepath1 = 'Public/biaoqian/upload'; $path1 = dir($savepath1); while (($ ...
- Oracle中SQL查询表字段基本信息、主键、外键(转)
select utc.column_name, utc.data_type, utc.data_length, utc.data_precision, utc.data_Scale, utc.null ...
- Jacoco入门
Jacoco介绍 转自:wangmuming 的博客 Jacoco是一个开源的覆盖率工具.Jacoco可以嵌入到Ant .Maven中,并提供了EclEmma Eclipse插件,也可以使用JavaA ...
- Java Base64 类
package org.yp.ypfinancing.core.service.payV2.domain.service.Sdp.utils; public final class Base64 { ...
- little tips of painter.drawRect in Qt
一个QImage或QPixmap新建变量时,第一次填充图片时设置的宽高正常(fill),其后的绘制操作(draw)则会在绘制的矩形底边和右边加上painter.pen().width() 在下面代码1 ...
- 火狐浏览器不能获取 event,解决js报错问题
//←的keyCode等于:37 //→的keyCode等于:39 //↑的keyCode等于:38 //↓的keyCode等于:40 function keystoke(obj){ //var e ...
- 369. Plus One Linked List
Given a non-negative number represented as a singly linked list of digits, plus one to the number. T ...
- loadRunner录制脚本常见问题及解决方法
1.是用IE9录制IE浏览器异常关闭 系统:win7 LR:11 浏览器:IE9 lr使用IE9录制脚本时,浏览器异常关闭且lr报the recording of the application wa ...