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/')) })