zoukankan      html  css  js  c++  java
  • 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/'))
    })
    

      

     

      

     

      

  • 相关阅读:
    LeetCode 121. Best Time to Buy and Sell Stock
    LeetCode 221. Maximal Square
    LeetCode 152. Maximum Product Subarray
    LeetCode 53. Maximum Subarray
    LeetCode 91. Decode Ways
    LeetCode 64. Minimum Path Sum
    LeetCode 264. Ugly Number II
    LeetCode 263. Ugly Number
    LeetCode 50. Pow(x, n)
    LeetCode 279. Perfect Squares
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4774003.html
Copyright © 2011-2022 走看看