• Gulp-前端进阶A-1


    毕业到转行以来有一年时间了,成为一名程序猿也有大半年了,之前在新浪上随便写写简单的学习过程,感觉不够像那么回事,现在接触前端也有一段时间了,也做过几个项目,认识到可以拓展的实在太多了,希望从这里起步,踏踏实实,记录好点点滴滴。------HHL

    Gulp使用步骤:

      1 安装node(npm),全局安装,我使用的是windows7

      2 全局安装gulp,npm install -g gulp

      3 搭建项目框架结构,建package.json,写上{}

        

        build为转化后存储的文件,src为自己的项目,即来源文件,gulpfile.js为操作代码,package.json为安装gulp及插件的信息

      4 在项目根目录以--save -dev来安装一堆你要用的,首先npm install --save-dev gulp必须的

      5 然后各种插件 npm install --save-dev gulp-less,npm install --save-dev gulp-watch......基本看名称就知道插件作用

        gulp-rename:重命名

        gulp-uglify:JS压缩

        gulp-minify-css/html

        gulp-concat:JS合并

        gulp-less/sass

        gulp-imagemin

        还有 browserify,livereload,browser-sync的使用

      6 API

        gulp.src(globs[,options]):路径(类似正则),参数:数据流(是吧?stream)

          部分:

          *:单字符串

          **:字符串、分隔符

          js/*/.js 匹配js目录及其子目录下所有后缀为.js的文件

          *.+(js|css) 匹配根目录下所有后缀为.js或者.css的文件

          多种匹配模式下排除:gulp.src(['js/*.js','css/*.css','!reset.css']),排除reset.css

        gulp.dest(path[,options]):转化存储到

        gulp.task(name[,deps],fun):deps为先执行的任务,name为任务,在命令行输入:gulp name,就运行了

        gulp.watch(glob[,opts],tasks):监听文件变化

        .pipe:类似柯理化一样的那种函数连接

      7 参考文献

        http://www.cnblogs.com/tugenhua0707/p/5562548.html#_labe3

        http://www.w3ctech.com/topic/134

      . plugins

        替代繁琐的(例子):取代 var imagemin=require('gulp-imagemin');

        用:同样需要安装gulp-imagemin

          var gulp = require('gulp'),
          这个---gulpLoadPlugins = require('gulp-load-plugins'),
          这个---plugins = gulpLoadPlugins();

          路径....  

          gulp.task('images',function(){
            return gulp.src(paths.img + "**/*")  
            .pipe(plugins.imagemin())
            .pipe(gulp.dest(paths.build + "/images"));    
          });

        图片压缩效果:压缩效果太小,https://tinypng.com/,这个效果超好,可以图片选择这个压缩

          

  • 相关阅读:
    HDU 5023 A Corrupt Mayor's Performance Art(线段树区间更新)
    CSU 1120 病毒(DP)
    CSU 1116 Kingdoms(枚举最小生成树)
    一种map容器遍历的方法
    CSU 1113 Updating a Dictionary(map容器应用)
    Python模块-virtualenv-虚拟环境
    计算学习原理
    sklearn-特征工程之特征选择
    链家网深圳租房信息分析报告
    test
  • 原文地址:https://www.cnblogs.com/hhweb/p/5711158.html
Copyright © 2020-2023  润新知