zoukankan      html  css  js  c++  java
  • Gulp学习笔记

    Gulp基于Node.js的前端构建工具,所以要先安装node。关于node的安装,参考:

    https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/00143450141843488beddae2a1044cab5acb5125baf0882000

    node安装包下载:

    https://nodejs.org/en/download/

    安装:

    下载的是.msi安装包,一路接受安装。安装完成后,打开cmd输入path命令,查看到环境变量中有了刚才的安装目录

    输入命令node -v,查看node的版本号

    退出Node.js环境

    连按两次Ctrl+C

    NPM

    在正式开始Node.js学习之前,先认识一下npm,,NPM是随同NodeJS一起安装的包管理工具

    为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐

    有了npm,可以直接执行命令来下载安装,更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Ynpm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。

    常见的使用场景有以下几种:

    • 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
    • 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
    • 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
    • 输入命令npm -v,查看npm的版本号

    Gulp

    自动化地完成 javascript 、 coffee、 sass 、 less 、 html/image 、 css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤

    安装:

    首先要全局安装一遍:

    npm install --global gulp

    全局的被安装在:C:Users26395AppDataRoaming pm ode_modulesgulp

    全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次。把目录切换到你的项目文件夹中,然后在命令行中执行:

    npm install --save-dev gulp

    ps:可以在所有项目的根目录安装node_modules,这样就不用在每个项目都去安装一遍

    执行gulp时遇到问题:

    Cannot find module :

    例如:Cannot find module 'gulp-uglify',也就是缺少gulp.js中所要用到的插件

    执行命令安装对应的插件到总module文件同级目录下

    npm install --save-dev gulp-concat

    会在node_modules同级目录生成一个package-lock.json文件,每次安装新的插件,这个文件会更新

    多个插件一起安装:

    npm install --save-dev gulp-ruby-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del

    gulp

    安装插件被墙,在当前目录执行:

    npm config set registry https://registry.npm.taobao.org

    npm info underscore

    gulp插件介绍:

     

    运行gulp任务

    需切换到存放 gulpfile.js 文件的目录,然后在命令行中执行gulp命令,gulp后面可以加上要执行的任务名,例如gulp task,如果没有指定任务名,则会执行任务名为default的默认任务

    G

    ulp编写:

    创建一个gulpfile.js在根目录下

     

    加载插件:

    var gulp = require('gulp'),

    sass = require('gulp-ruby-sass'),

    autoprefixer = require('gulp-autoprefixer'),

    minifycss = require('gulp-minify-css'),

    jshint = require('gulp-jshint'),

    uglify = require('gulp-uglify'),

    imagemin = require('gulp-imagemin'),

    rename = require('gulp-rename'),

    concat = require('gulp-concat'),

    notify = require('gulp-notify'),

    cache = require('gulp-cache'),

    livereload = require('gulp-livereload'),

    del = require('del');

    上面的变量在下面的流管道工作中使用到。

    建立任务:

    任务api:

    https://github.com/gulpjs/gulp/blob/master/docs/API.md

    详细使用教程:https://blog.csdn.net/u012863664/article/details/72578582

    运行:

     

    Gulp任务工作流程:

    gulp.src(ad_js_arr)

    .pipe(concat("stcAd.js"))

    .pipe(uglify())

    .pipe(gulp.dest(path.rel));

     

    gulp.src:设置需要处理的文件的路径,可以是多个文件以数组的形式[main.scss, vender.scss],也可以是正则表达式/**/*.scss。

    .pipe()这个API将需要处理的文件导向插件,经过插件处理后的流又可以继续导入到其他插件中,也可以把流写入到文件中

    gulp.dest()API设置生成文件的路径,一个任务可以有多个生成路径,一个可以输出未压缩的版本,另一个可以输出压缩后的版本。

    疑问:插件对文件的处理,又顺序的要求吗,比如得先压缩再怎么样

     

    使用依赖优化gulp 命令:

    当有多个任务时,需要知道怎么来控制任务的执行顺序。可以通过任务依赖来实现。例如我想要执行 one,two,three 这三个任务,那我们就可以定义一个空的任务,然后把那三个任务当做这个空的任务的依赖就行了:

    //只要执行default任务,就相当于把one,two,three这三个任务执行了

    gulp.task('default',['one','two','three']);

    如果任务相互之间没有依赖,任务就会按你书写的顺序来执行,如果有依赖的话则会先执行依赖的任务。

    还有很多问题存在,比如 合并js的时候,使用 gulp-concat 生成的新js里面,原来html里面并没有引用,还需要使用gulp-inject 来将生成的js注入到html,还有很多东西要学习

    异步任务处理:
    如果某个任务所依赖的任务是异步的,就要注意了,gulp并不会等待那个所依赖的异步任务完成,而是会接着执行后续的任务,如果我们想等待 异步任务 中的异步操作完成后再执行后续的任务,参考

    https://blog.csdn.net/u012863664/article/details/72578582 的三种实现方法

  • 相关阅读:
    DELPHI 画报表 画表头 stringgrid控件
    蜂巢 Thinking in Agile 我们需要怎样的软件过程(1)
    小博一周年了 将开源进行到底
    Windows Mobile下实现图片的3D效果
    蜂巢 Thinking in Agile 我们需要怎样的软件过程(2)
    Windows 中各种 dll 的导出功能
    以下代码中的两个sizeof用法有问题吗?
    sizeof和strlen
    以下反向遍历array数组的方法有什么错误?
    找错题
  • 原文地址:https://www.cnblogs.com/yaoyao-sun/p/10364500.html
Copyright © 2011-2022 走看看