var gulp = require('gulp');
//语法检查
var jshint = require('gulp-jshint');
// 合并
var concat = require('gulp-concat');
// 压缩
var uglify = require('gulp-uglify');
// 重命名
var rename = require('gulp-rename');
gulp.task('minify', function(){
gulp.src('public/javascripts/main.js')
.pipe(uglify())
.pipe(gulp.dest('build'))
})
gulp.task('js', function(){
return gulp.src('public/javascripts/showpage.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(concat('main.js'))
.pipe(gulp.dest('build'))
;
})
http://segmentfault.com/a/1190000002785647
匹配文件路径
js/app.js js/*.js js/**/*.js !js/app.js 除了 *.+(js|css) 以.js .css结尾 gulp.src(['js/**/*.js', '!js/**/*.min.js']) 匹配多个
前端工具gulp的用途和使用方法 :http://blog.sina.com.cn/s/blog_6592d8070102vmuq.html
看懂了,把他所讲的内容,整合为自己的了。
(很详细)前端构建工具gulpjs的使用介绍及技巧:www.cnblogs.com/2050/p/4198792.html
只是用了需要的,详细的还没看
http://markpop.github.io/2014/09/17/Gulp%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/
这个也挺不错的,以后慢慢学
gulp 自动编译sass
var gulp = require('gulp');
var watch = require('gulp-watch');
var sass = require('gulp-sass');
gulp.task('sassfile',function(){
return gulp.src('./public/sass/*.scss')
.pipe( sass() ).pipe( gulp.dest( './public/stylesheets' ) );
});
gulp.task('watch', function () {
gulp.watch('./public/sass/*.scss',['sassfile']);
});
sublimeonsavebuild 不能设置保存位置,需要gulp来编译sass到其他地方,添加gulp-watch来自动检测scss的变化,要注意./public
gulp html include
gulp.task('fileinclude', function() {
gulp.src('./views/source/**/*.html')
.pipe(fileinclude({
prefix: '@@',
basepath: '@file'
}))
.pipe(gulp.dest('./views/target'));
});
压缩css:gulp-minify-css
gulp.task('minifycss', function() {
return gulp.src('public/css/source/*.css') //压缩的文件
.pipe(gulp.dest('public/css/source/*.css')) //输出文件夹
.pipe(minifycss()); //执行压缩
});
rename:
rename = require('gulp-rename'),
.pipe(rename({suffix: '.min'})) //rename压缩后的文件名
autoprefix
var autoprefixer = require('gulp-autoprefixer');
gulp.task('autoprefixer', function () {
return gulp.src('./public/stylesheets/*.css')
.pipe(autoprefixer({
browsers: ["last 1 version", "> 10%", "> 5% in US", "ie 8", "ie 7"],
cascade: false
}))
.pipe(gulp.dest('dist'));
});
gulp-imagemin:http://www.ydcss.com/archives/26 (很详细)
gulp.task('images', function(){
gulp.src('./public/images/source/*.{png,jpg,gif,ico}')
.pipe(imagemin({
optimizationLevel: 5, //类型:Number 默认:3 取值范围:0-7(优化等级)
progressive: true, //类型:Boolean 默认:false 无损压缩jpg图片
interlaced: true, //类型:Boolean 默认:false 隔行扫描gif进行渲染
multipass: true //类型:Boolean 默认:false 多次优化svg直到完全优化
}))
.pipe(gulp.dest('./public/images/target/'))
})