gulp

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

  

 

  

 

  

posted on 2015-08-31 20:18  j.w  阅读(237)  评论(0编辑  收藏  举报