为什么要使用gulp:
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,
自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
这个是grunt对于javascript世界的构建工具,也是gulp的存在意义。
gulp 官方网站http://gulpjs.com/
git网址 https://github.com/gulpjs/gulp
正题:
在我们从ionic 官方网站上down一下ionic start demo的时候里面会有两个文件
gulpfile.js
package.json
gulpfile.js就是guip的核心,他有丰富的插件,共你用作各种功能。
gulp 相关的插件在https://www.npmjs.com基本上都可以找到,并且有简单使用介绍。
这里面我仅做几个例子,作为介绍,
首先要安装 gulp
先安装相关插件
相关的图片就被压缩到/dest/img,
再比如(这个,知道怎么个 意思,但是由于文件比较少,效果不是很好,这个是源文件中本来就有的)
gulp 还有很多功能,监视,语法检测,等等,都有相关插件,只要有需要去加入相应的risk就可以了。
注意点:
1.在打包的时候,由于Jetbrains-idea 里面ionic build android 的时候是针对www文件下的,而我们gulp的目标路径肯定不能是本路径,如果可以,配置一下,让build 的默认路径变成dest (代码里生成的),那么就可以直接build了
但是我图省事,就直接把www里面代码覆盖了。
2.
照此方法,理论上是可行的,但是由于电脑不争气。罢工了。以上内容待测试。
参考文献:
http://www.tuicool.com/articles/uMBZ7fB
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/ 一些语法的讲解,还有文件match
http://markgoodyear.com/2014/01/getting-started-with-gulp/ 整个流程的实例
一句话:自动化。对于需要反复重复的任务,例如压缩(minification)、编译、单元测试、linting等,
自动化工具可以减轻你的劳动,简化你的工作。当你正确配置好了任务,任务运行器就会自动帮你或你的小组完成大部分无聊的工作。
这个是grunt对于javascript世界的构建工具,也是gulp的存在意义。
gulp 官方网站http://gulpjs.com/
git网址 https://github.com/gulpjs/gulp
正题:
在我们从ionic 官方网站上down一下ionic start demo的时候里面会有两个文件
gulpfile.js
package.json
gulpfile.js就是guip的核心,他有丰富的插件,共你用作各种功能。
gulp 相关的插件在https://www.npmjs.com基本上都可以找到,并且有简单使用介绍。
这里面我仅做几个例子,作为介绍,
首先要安装 gulp
Install gulp globally:
npm install --global gulp
Install gulp in your project devDependencies:
//这边安装完之后,会在package.json里面,以后只有package.json里面有相关依赖,可以直接ionic install 就可以吧所有依赖安装了
npm install —-save-dev gulp
比如,图片压缩https://www.npmjs.com/package/gulp-imagemin
先安装相关插件
npm install --save-dev gulp-imagemin
npm install --save-dev imagemin-pngquant //这个是依赖
只要在gulpfile.js文件中加入如下代码:
var paths = {
sass : ['./scss/**/*.scss'],
javascript : ['./www/js/**/*.js'],
image : ['./www/img/*']
};
var gulp = require('gulp');//原文件中已经存在
var imagemin = require('gulp-imagemin');
var pngquant = require('imagemin-pngquant');
gulp.task('imagemin', function () {
return gulp.src(paths.image)
.pipe(imagemin({
progressive: true,
svgoPlugins: [{removeViewBox: false}],
use: [pngquant()]
}))
.pipe(gulp.dest('./dest/img'));
});
然后在项目的跟目录中输入 gulp imagemin
相关的图片就被压缩到/dest/img,
再比如(这个,知道怎么个 意思,但是由于文件比较少,效果不是很好,这个是源文件中本来就有的)
var sass = require('gulp-sass');
var minifyCss = require('gulp-minify-css');
var rename = require('gulp-rename');
gulp.task('sass', function (done) {
gulp.src(paths.sass)
.pipe(sass())
.pipe(gulp.dest('./www/css/'))
.pipe(minifyCss({
keepSpecialComments: 0
}))
.pipe(rename({extname: '.min.css'}))
.pipe(gulp.dest('./www/css/'))
.on('end', done);
});
运行gulp.sass就可以运行了。如果一个gulpfile.js里面有很多这样的risk那么:
gulp.task('default',['imagemin', 'sass']
运行gulp就可以了。
gulp 还有很多功能,监视,语法检测,等等,都有相关插件,只要有需要去加入相应的risk就可以了。
注意点:
1.在打包的时候,由于Jetbrains-idea 里面ionic build android 的时候是针对www文件下的,而我们gulp的目标路径肯定不能是本路径,如果可以,配置一下,让build 的默认路径变成dest (代码里生成的),那么就可以直接build了
但是我图省事,就直接把www里面代码覆盖了。
2.
照此方法,理论上是可行的,但是由于电脑不争气。罢工了。以上内容待测试。
参考文献:
http://www.tuicool.com/articles/uMBZ7fB
http://www.smashingmagazine.com/2014/06/11/building-with-gulp/ 一些语法的讲解,还有文件match
http://markgoodyear.com/2014/01/getting-started-with-gulp/ 整个流程的实例