Building with Gulp
WTSER
Automate and enhance your workflow
What Is Gulp
a building system
What Is Gulp
build on Node.js
What Is Gulp
written by javascript
What Is Gulp
a lots of plugins
What Is Gulp
Gulp is open source
Installing Gulp
全局安装
npm install -g gulp
安装到项目中
npm install --save-dev gulp
Using Gulp
创建 gulpfile.js 文件
var gulp = require('gulp'),
uglify = require('gulp-uglify');
gulp.task('minify', function () {
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
});
Using Gulp
定义模块
var gulp = require('gulp'),
uglify = require('gulp-uglify');
定义任务
gulp.task('minify', function () {
});
gulp.src('js/app.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
定义任务执行具体逻辑
Using Gulp
STREAMS
Using Gulp
举个栗子
gulp.task('js', function () {
return gulp.src('js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('app.js'))
.pipe(gulp.dest('build'));
});
Using Gulp
举个栗子
Using Gulp
gulp.src()
使用 node-glob 匹配文件路径
js/app.js
js/*.js
js/**/*.js
!js/app.js Excludes js/app.js from the match, which is useful if you want to match all files in a directory except for a particular file
*.+(js|css) Matches all files in the root directory ending in .js or .css
gulp.src(['js/**/*.js', '!js/**/*.min.js'])
包含多个文件
Using Gulp
gulp.task()
gulp.task('greet', function () {
console.log('Hello world!');
});
gulp.task('build', ['css', 'js', 'imgs']);
gulp.task('css', ['greet'], function () {
// Deal with CSS here
});
gulp.task('default', function () {
// Your default task
});
Using Gulp
gulp.watch()
gulp.task('watch', function () {
gulp.watch('templates/*.tmpl.html', ['build']);
});
gulp.watch('templates/*.tmpl.html', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
var watcher = gulp.watch('templates/*.tmpl.html', ['build']);
watcher.on('change', function (event) {
console.log('Event type: ' + event.type); // added, changed, or deleted
console.log('Event path: ' + event.path); // The path of the modified file
});
除了 change 还支持 error、end、ready、nomatch等事件
Reloading Changes In The Browser
Reloading Changes In The Browser
Reloading Changes In The Browser
BrowserSync
LiveReload
Why Gulp
实现相同的功能
grunt.initConfig({
less: {
development: {
files: {
"build/tmp/app.css": "assets/app.less"
}
}
},
autoprefixer: {
options: {
browsers: ['last 2 version', 'ie 8', 'ie 9']
},
multiple_files: {
expand: true,
flatten: true,
src: 'build/tmp/app.css',
dest: 'build/'
}
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-autoprefixer');
grunt.registerTask('css', ['less', 'autoprefixer']);
var gulp = require('gulp'),
less = require('gulp-less'),
autoprefix = require('gulp-autoprefixer');
gulp.task('css', function () {
gulp.src('assets/app.less')
.pipe(less())
.pipe(autoprefix('last 2 version', 'ie 8', 'ie 9'))
.pipe(gulp.dest('build'));
});
Why Gulp
实现相同的功能
grunt 读写文件频繁
building-with-gulp
By wtser
building-with-gulp
building-with-gulp
- 2,401