The streaming build system
- Automation - gulp is a toolkit that helps you automate painful or time-consuming tasks in your development workflow.
- Platform-agnostic - Integrations are built into all major IDEs and people are using gulp with PHP, .NET, Node.js, Java, and other platforms.
- Strong Ecosystem - Use npm modules to do anything you want + over 2000 curated plugins for streaming file transformations
- Simple - By providing only a minimal API surface, gulp is easy to learn and simple to use
doctype html
html
head
title hello jade & gulp
body
h1 we used jade to generate this
p it seems like it works! :) {
} $ pm install --save-dev gulp $ npm install --save-dev gulp-jade var gulp = require('gulp'),
jade = require('gulp-jade');
gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('builds/development'));
}); $ gulp jade module.exports = {
log: function(string) {
if(console) console.log(string);
}
} var logger =require('./logger');
logger.log('Hurray, it works! :)'); $ npm install --save-dev gulp-browserify var gulp = require('gulp'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify');
gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('builds/development'));
});
gulp.task('js',function(){
return gulp.src('src/js/main.js')
.pipe(browserify({ debug: true}))
.pipe(gulp.dest('builds/development/js'));
}); $ gulp js doctype html
html
head
title hello jade & gulp
body
h1 we used jade to generate this
p it seems like it works! :)
mark just check the change of jade!
script(src="./js/main.js") $ gulp jade Ctrl + P
[index.html]
(快速定位文件并打开它)
Ctrl + Shift + P
[Open in Browser -Productive Server] $ npm install --save-dev gulp-uglify var gulp = require('gulp'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
uglify= require('gulp-uglify');
gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('builds/development'));
});
gulp.task('js',function(){
return gulp.src('src/js/main.js')
.pipe(browserify({ debug: true}))
.pipe(uglify())
.pipe(gulp.dest('builds/development/js'));
}); $ gulp js $ npm install --save-dev gulp-if var gulp = require('gulp'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
uglify= require('gulp-uglify'),
gulpif= require('gulp-if');
var env = process.env.NODE_ENV;
gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('builds/development'));
});
gulp.task('js',function(){
return gulp.src('src/js/main.js')
.pipe(browserify({ debug: env === 'development'}))
.pipe(gulpif(env === 'production', uglify()))
.pipe(gulp.dest('builds/development/js'));
}); $ NODE_ENV=development gulp js $ NODE_ENV=production gulp js // var env = process.env.NODE_ENV || 'production';
var env = process.env.NODE_ENV || 'development'; var gulp = require('gulp'),
jade = require('gulp-jade'),
browserify = require('gulp-browserify'),
uglify= require('gulp-uglify'),
gulpif= require('gulp-if');
var env = process.env.NODE_ENV || 'production';
gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest('builds/development'));
});
gulp.task('js',function(){
return gulp.src('src/js/main.js')
.pipe(browserify({ debug: env === 'development'}))
.pipe(gulpif(env === 'production', uglify()))
.pipe(gulp.dest('builds/development/js'));
}); $ npm install --save-dev gulp-sass sass= require('gulp-sass');
gulp.task('sass',function(){
return gulp.src('src/sass/main.scss')
.pipe(sass({ sourceComments: 'map'}))
.pipe(gulp.dest('builds/development/css'));
}); body {
color: $red;
} $red: #ff0000;
// rgba(); @import "variables";
body {
color: $red;
} $ gulp sass doctype html
html
head
title hello jade & gulp
link(rel="stylesheet" href="./css/main.css")
body
h1 we used jade to generate this
p it seems like it works! :)
mark just check the change of jade!
script(src="./js/main.js") $ gulp jade var outputDir = 'builds/development';
//path 变量
.pipe(gulp.dest(outputDir));
// .pipe(gulp.dest('builds/development'));
.pipe(gulp.dest(outputDir + '/js'));
// .pipe(gulp.dest('builds/development/js'));
.pipe(gulp.dest(outputDir + '/css'));
// .pipe(gulp.dest('builds/development/css')); gulp.task('sass',function(){
var config = {};
if (env === 'development') {
config.sourceComments = 'map';
}
if(env === 'production'){
config.outputStyle = 'compressed';
}
return gulp.src('src/sass/main.scss')
// .pipe(sass({ sourceComments: 'map'}))
.pipe(sass(config))
.pipe(gulp.dest(outputDir + '/css'));
// .pipe(gulp.dest('builds/development/css'));
}); $ NODE_ENV=development gulp sass $ NODE_ENV=production gulp sass gulp.task('watch',function(){
gulp.watch('src/template/**/*.jade',['jade']);
gulp.watch('src/js/**/*.js',['js']);
gulp.watch('src/sass/**/*.scss',['sass']);
}); $ gulp watch gulp.task('default',['js','sass','jade','watch']);
/*
function(){
gulp.watch('src/template/**/*.jade',['jade']);
}
=== ???
['jade']
*/ $ gulp $ npm install --save-dev gulp-connect connect= require('gulp-connect');
gulp.task('connect',connect.server({
root: [outputDir],
open: { browser: 'Google Chrome'}
}));
gulp.task('default',['js','sass','jade','watch','connect']); $ gulp gulp.task('jade',function(){
return gulp.src('src/template/**/*.jade')
.pipe(jade())
.pipe(gulp.dest(outputDir))
.pipe(connect.reload());
// .pipe(gulp.dest('builds/development'));
});
gulp.task('js',function(){
return gulp.src('src/js/main.js')
.pipe(browserify({ debug: env === 'development'}))
.pipe(gulpif(env === 'production', uglify()))
.pipe(uglify())
.pipe(gulp.dest(outputDir + '/js'))
.pipe(connect.reload());
// .pipe(gulp.dest('builds/development/js'));
});
gulp.task('sass',function(){
var config = {};
if (env === 'development') {
config.sourceComments = 'map';
}
if(env === 'production'){
config.outputStyle = 'compressed';
}
return gulp.src('src/sass/main.scss')
// .pipe(sass({ sourceComments: 'map'}))
.pipe(sass(config))
.pipe(gulp.dest(outputDir + '/css'))
.pipe(connect.reload());
// .pipe(gulp.dest('builds/development/css'));
}); $ gulphere some errors, what's wrong with this? #202 Get started with gulp Part 6: LiveReload and web server /images/errors/ gulp-test
/*
gulp.task('connect',connect.server({
root: [outputDir],
open: { browser: 'Google Chrome'}
}));
*/
//https://github.com/AveVlad/gulp-connect
gulp.task('connect',function(){
connect.server({
root: [outputDir],
port: 8080,
livereload: true,
// open: { browser: 'Google Chrome'}
});
});'''javascript var env = process.env.NODE_ENV; '''
CMD: 手动 传入参数 set NODE_ENV=development set NODE_ENV=production
'''bash $ set NODE_ENV=development $ gulp ''' '''bash $ set NODE_ENV=production $ gulp '''
???
// var env = process.env.NODE_ENV || 'production'; // var env = process.env.NODE_ENV || 'development';
npm install --save-dev gulp browserify vinyl-source-stream
===
npm install --save-dev gulp
npm install --save-dev browserify
npm install --save-dev vinyl-source-stream