简介
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
功能说明
编译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本身带了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 jshint 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
npm install gulp-clean --save-dev
根据条件判断编译方式
gulp-cond
gulp.src("*.js")
.pipe(cond(is_release, uglify({compress:false})))
.pipe(gulp.dest(target_path+path.js));
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.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 {
}
});
一些错误处理
Error: Cannot find module 'internal/fs'
处理方法:把提示里的模块卸载重装。
npm remove bower
npm install bower -g
npm install bower --save-dev
Mac环境下提示:
Error: Cannot find module 'internal/util/types'
处理方法:
sudo npm cache clean -f
sudo n 6