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

      

     

      

     

      

  • 相关阅读:
    密码-散乱的密文
    设置nginx服务器
    Postman设置authorization
    mongodb 学习笔记 1
    一道面试题,观察者模式
    laravel-admin form组件
    laravel-admin 管理平台获取当前登陆用户信息
    Laravel-admin安装富文本编辑器 WangEditor 上传图片到服务器,而不是按BASE64保存
    Laravel报错Whoops, looks like something went wrong 解决办法
    菜鸟用composer 安装项目依赖 vendor:当拿到一个Laravel项目时怎么配置本地环境
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4774003.html
Copyright © 2020-2023  润新知