gulp自动化构建工具的使用

gulp自动化构建工具:

  把前端开发常见的处理(“搬砖”)程序,通过一个工具模块管理起来,只需配置一次,达到自动处理目的,简化开发,提高效率!!

安装:

 1.全局安装(全局安装一个gulp命令)

  A.下载安装:

  cnpm:cnpm i gulp -g

  如果cnpm安装有问题:可使用yarn安装

  yarn:   yarn global add gulp

  B.测试

  gulp -v

 2.本地安装(引入依赖模块,支持不同版本的项目运行)

  A.安装

   a.创建一个新文件夹,初始化package.json

    cnpm:  cnpm init -y

    yarn:  yarn init -y

   b.安装本地gulp

    cnpm:  cnpm i gulp -D(安装开发依赖:全称:--save-dev) 

    yarn:  yarn add gulp -D

   c.配置:

    • 创建一个gulpfile.js文件,与package.json同目录
    • 引入gulp核心模块

      1 var gulp =require(‘gulp‘);
    • 配置gulp任务 :语法:gulp.task(name[, deps], fn)
      • 参数:
        name 任务名称
        deps 可选,包含任务列表的数组
        fn 回调函数,任务执行的代码

        1 var gulp = require(‘gulp‘);
        2
        3 gulp.task(‘default‘, function() {
        4     console.log("测试");
        5 });

      

    •   执行任务

      •   gulp 任务名称  或者  gulp 任务名称是default就可以省略

        1 gulp myTask(任务名)

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

下一篇将介绍gulp常用插件的使用

    

    

原文地址:https://www.cnblogs.com/nanxiaoge/p/10765705.html

时间: 2024-10-17 06:26:38

gulp自动化构建工具的使用的相关文章

gulp自动化构建工具

gulp    自动化构建工具,实时监控.代码合并.压缩... http://www.gulpjs.com.cn/     中文网 http://gulpjs.com/plugins/     英文网 ,插件   本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步:安装Node 首先,最基本也最重要的是,我们需要搭建node环境.访问 http:/

做一个合格的前端,gulp自动化构建工具入门教程

我的新作观点网http://www.guandn.com (观点网是一个猎获新奇.收获知识.重在独立思考的网站),它前端js.css的压缩.合并.md5命名等就使用了gulp自动化构建技术,gulp很小巧使用起来很舒服.ps:接下来我会逐一开源观点网开发过程中的前后端技术,如:lucene全文索引.自定义富文本编辑器.图片上传压缩水印等等. 一.什么是gulp gulp是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务.例如:css.js的合并与压缩(减少http请求,缩小文

Gulp(自动化构建工具 )

前言 Gulp,简而言之,就是前端自动化开发工具,利用它,我们可以提高开发效率. 比如: 1.  压缩js 2.  压缩css 3.  压缩less 4.  压缩图片 等等… 我们完全可以利用Gulp来自动化地完成这些重复性很强的工作. Gulp可以帮助我们 用自动化构建工具增强你的工作流程! 好了,废话不多说了.既然要了解Gulp,就得先安装它.Gulp是基于node来实现的,so你得先有个node环境 优势: node环境有了后,安装Gulp就很easy咯 入门指南 1. 全局安装 gulp

gulp自动化构建工具使用总结

简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率. gulp是基于Nodejs的自动任务运行器, 她能自动化地完成 javascript/coffee/sass/less/html/image/css 等文件的的测试.检查.合并.压缩.格式化.浏览器自动刷新.部署文件生成,并监听文件在改动后重复指定的这些步骤.在实现上

整理gulp自动化构建工具

教程地址:http://www.dtao.org/archives/18     http://segmentfault.com/a/1190000000372547     http://www.w2bc.com/Article/12941 1.安装nodejs 2.新建package.json文件 3.全局和本地安装gulp 4.使用npm安装gulp插件(如:gulp-jshint.gulp-sass.gulp-mini-css.gulp-uglify等) 5.新建gulpfile.js文

gulp自动化构建工具下的swig、babel、sass

1.三个需要在npm中找相应的教程 gulp-scss.gulp-swig.gulp-babel 2.具体的相关代码如下 var gulp = require('gulp'); var swig = require('gulp-swig'); var babel = require('gulp-babel'); var scss = require("gulp-scss"); gulp.task("scss", function () { gulp.src( &qu

gulp自动化构建工具使用

gulpfile.js: var gulp = require("gulp"); var imagemin = require("gulp-imagemin");//压缩图片插件 var uglify = require("gulp-uglify"); //js压缩插件 var sass = require("gulp-sass"); //sass转换为css插件 var concat = require("gulp

【Gulp自动化构建工具】

一:入门指南安装gulp网址:https://www.gulpjs.com.cn/docs/getting-started/ 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm install --save-dev gulp 3. 在项目根目录下创建一个名为 gulpfile.js 的文件: var gulp = require('gulp'); gulp.task('default',

web 环境搭建00前端自动化构建工具(gulp)

web 环境搭建----前端自动化构建工具(gulp): 1----先下载安装node.js 2----然后在node.js命令行安装:npm install gulp -g (全局下载安装gulp插件) 3----然后进入到项目文件夹(命令cd 文件夹名),在项目文件夹中安装依赖文件:npm install gulp --save-dev (根据依赖文件下载gulp插件) 4----在项目文件夹目录下初始化:npm init (初始化文件) {初始化文件后项目中会出现packgae.json文