zoukankan      html  css  js  c++  java
  • 前端自动化构建工具 Gulp 使用

    一个月没写博客了,今天有时间,就写个gulp的入门使用吧。。

    简介:gulp是一个前端自动化构建工具,可以实现代码的检查、压缩、合并……等等,gulp是基于Node.js的自动任务运行器

    一、安装Node

      去Node官网下载安装,由于5.0版本的改变比较大,下载4.2.2稳定版即可

      以下操作都是在命令行环境中执行:

    node -v        //可查看安装Node的版本号,有即为安装成功

    二、通过npm安装Gulp

       npm(node package manager)nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等);

    npm install -g gulp         //-g 是全局(global)安装,在任何目录下都可以使用
    gulp -v                     //可查看安装gulp的版本,有即为安装成功

    三、在项目中使用Gulp完成自动化构建

      通过命令行进入你的项目目录,cd 命令就可以,现在我的项目根目录是 C:gulpdemo

      注: 因为在向项目中安装gulp的时候,项目名会直接默认你的文件夹的名字命名为项目名,

        所以在创建项目文件夹时命名不要使用关键字类似gulp以及模块名等。

      1、初始化项目

    // 当前目录:C:gulpdemo
    npm init         // 通过这个命令初始化项目,中间会要求设置几个基本设置,不需要直接回车即可

     初始化之后会在项目根目录出现  package.json 文件

     npm在package.json文件中管理项目的依赖项以及项目的元数据。node执行js中require的时候,也会根据package.json中的依赖项查找。

      2、在项目中安装gulp以及一系列需要用到的gulp插件

    npm install gulp --save-dev              //--save-dev的作用是让gulp依赖进项目中,在package.json中记录起来
    npm install gulp-less --save-dev         //gulp-less插件,用于将less样式编译为css样式文件,相当于koala的less编译
    npm install gulp-uglify --save-dev       //gulp-uglify插件,用于对js文件进行压缩操作
    npm install gulp-minify-css --save-dev   //gulp-minify-css插件,用于对css样式进行压缩操作
    npm install gulp-imagemin --save-dev     //这两个插件用于图片的无损压缩
    npm install imagemin-pngquant --save-dev
    npm install gulp-livereload --save-dev   //自动刷新页面,妈妈再也不用担心 F5 被按坏了

      3、在根目录中新建 gulpfile.js 文件

      以less编译插件为例:

    //加载模块
    var gulp = require("gulp");
    var less = require("gulp-less");
    //less编译
    gulp.task("less", function(){
        gulp.src('src/less/*.less')
            .pipe(less())
            .pipe(gulp.dest('src/css'));
    });
    gulp less                        //进入项目根目录运行命令即可启动任务操作

      项目代码放在 C:gulpdemosrc 里面,代码检查压缩处理之后自动存在 C:gulpdemodist 里作为发布代码

     ●  我写好的gulpfile.js文件包括上面的压缩功能,可以根据需要的功能寻找gulp插件进行拓展,要的人多就放上来,比较简单,少的话就不放了

    代码地址 go go go

     转载请注明: http://www.cnblogs.com/zhangmingze/p/4953704.html

  • 相关阅读:
    POJ 3630 Phone List | Trie 树
    POJ 3974 Palindrome | 马拉车模板
    POJ 3422 Kaka's Matrix Travels | 最小费用最大流
    POJ 2195 Going Home | 带权二分图匹配
    POJ 3068 "Shortest" pair of paths | 最小费用最大流
    POJ 3686 The Windy's | 最小费用最大流
    洛谷 最小费用最大流 模板 P3381
    POJ 2987 Firing | 最大权闭合团
    POJ 3469 Dual Core CPU | 最小割
    POJ 3281 Dining | 最大流
  • 原文地址:https://www.cnblogs.com/zhangmingze/p/4953704.html
Copyright © 2011-2022 走看看