Gulp 使用

来源：互联网发布：网络卫星电视机顶盒编辑：程序博客网时间：2024/06/04 23:29

1. gulp 安装

(1) 安装gulp

$ npm install gulp -g

(2) 转到淘宝的仓库

npm install gulp -g --registry https://registry.npm.taobao.org

(3) 到工程目录

cd lmc-web/src/main/gulp

(4) 依赖管理

npm install --registry https://registry.npm.taobao.org bower install

(5) 执行gulp 的task

gulp build

2. task 创建

3. 示例代码

/* jshint node:true */
'use strict';
// generated on 2015-02-10 using generator-gulp-webapp 0.2.0
var gulp = require('gulp');
var replace = require('gulp-replace-task');
var $ = require('gulp-load-plugins')();
var version = '0.0.0';

gulp.task('styles', function() {
return gulp.src('app/styles/main.css')
.pipe($.autoprefixer({
browsers: ['last 1 version']
}))
.pipe(gulp.dest('.tmp/styles'));
});

gulp.task('jshint', function() {
return gulp.src('app/scripts/**/*.js')
.pipe($.jshint())
.pipe($.jshint.reporter('jshint-stylish'))
.pipe($.jshint.reporter('fail'));
});

gulp.task('html', ['styles'], function() {
var assets = $.useref.assets({
searchPath: '{.tmp,app}'
});

return gulp.src('app/*.html')
.pipe(assets)
// .pipe($.if('*.js', $.uglify()))
// .pipe($.if('*.css', $.csso()))
.pipe(assets.restore())
.pipe($.useref())
// .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('dist'));
});

gulp.task('images', function() {
return gulp.src('app/images/**/*')
.pipe($.cache($.imagemin({
progressive: true,
interlaced: true
})))
.pipe(gulp.dest('dist/assets/images'));
});

gulp.task('fonts', function() {
return gulp.src(require('main-bower-files')().concat('app/fonts/**/*'))
.pipe($.filter('**/*.{eot,svg,ttf,woff}'))
.pipe($.flatten())
.pipe(gulp.dest('dist/assets/fonts'));
});

gulp.task('extras', function() {
return gulp.src([
'app/*.*',
'!app/*.html',
'node_modules/apache-server-configs/dist/.htaccess'
], {
dot: true
}).pipe(gulp.dest('dist'));
});

gulp.task('clean', require('del').bind(null, ['.tmp', 'dist']));

gulp.task('connect', function() {
var serveStatic = require('serve-static');
var serveIndex = require('serve-index');
var app = require('connect')()
.use(require('connect-livereload')({
port: 35729
}))
.use(serveStatic('.tmp'))
.use(serveStatic('app'))
.use('/bower_components', serveStatic('bower_components'))
.use(serveIndex('app'));

require('http').createServer(app)
.listen(9000)
.on('listening', function() {
console.log('Started connect web server on http://localhost:9000');
});
});

gulp.task('serve', ['connect', 'watch'], function() {
require('opn')('http://localhost:9000');
});

// inject bower components
gulp.task('wiredep', function() {
var wiredep = require('wiredep').stream;

gulp.src('app/*.html')
.pipe(wiredep())
.pipe(gulp.dest('app'));
});

gulp.task('watch', ['connect'], function() {
$.livereload.listen();

// watch for changes
gulp.watch([
'app/*.html',
'.tmp/styles/**/*.css',
'app/scripts/**/*.js',
'app/images/**/*'
]).on('change', $.livereload.changed);

gulp.watch('app/styles/**/*.css', ['styles']);
gulp.watch('bower.json', ['wiredep']);
});

gulp.task('build', ['jshint', 'html', 'images', 'fonts', 'extras'], function() {
return gulp.src('dist/**/*').pipe($.size({
title: 'build',
gzip: true
}));
});

gulp.task('default', ['clean'], function() {
gulp.start('build');
});

gulp.task('publish', ['build'], function() {
gulp.src('dist/*.html')
.pipe(replace({
patterns: [{
match: /<meta name="lmc-version" content="1.0.0">/g,
replacement: function() {
return '<meta name="lmc-version" content="'+version+'">';
}
}]
}))
.pipe(gulp.dest('../webapp'));

gulp.src('dist/assets/scripts/**')
.pipe($.if('*.js', $.uglify()))
.pipe(replace({
patterns: [{
match: /http\:\/\/localhost\:8080/g,
replacement: function() {
return '';
}
}]
}))
.pipe(gulp.dest('../webapp/assets/scripts'));

gulp.src(['dist/assets/styles/**'])
.pipe($.if('*.css', $.csso()))
.pipe(gulp.dest('../webapp/assets/styles'));
});

0 0