使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt。构建工具依靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查、合并、重命名、压缩、格式化、浏览器自动刷新、部署文件等功能。

gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入。下面是具体流程:

1、安装nodejs
nodejs下载地址:https://nodejs.org/

nodejs自带npm模块管理器,安装完成之后打开dos命令窗口输入 node -v就能查看nodejs是否安装成成功

常用的npm命令

npm init——初始化

npm install——安装插件

npm install plugname -g——全局安装

npm install [email protected]——安装具体某个版本的插件

npm update——更新插件

npm uninstall——卸载插件

常用dos命令

cd 进入某个目录

cd.. 返回上一级

dir 查看列表

cls 清除屏幕

del name 删除文件

md name 新建目录名

rd name 删除目录名

copy con name.txt 新建文件

del name.txt  删除文件

2、全局安装gulp
[plain] view plain copy
 
npm install gulp -g  
3、创建本地项目
上面是准备工作,安装完全局gulp之后,cd到项目文件夹安装本地gulp,安装之前要先初始化

[plain] view plain copy
 
npm init

初始化的时候要求你输入一些值,不输的直接回车即可,点击y之后在根目录自动创建了一个package.json文件,这个文件用来存放即将安装的插件name和version,这个文件有什么用呢?当我们把项目拷贝给别人的时候不需要拷贝插件,只需要把项目文件、package.json和gulp.file.js拷贝过去就可以,接收人cd到项目文件目录直接输入npm install即可安装上我们拷贝前安装的各种插件。

4、设计项目目录索引结构
[plain] view plain copy
 
└── src/  
    ├── less/    *.less 文件  
    ├── sass/    *.scss *.sass 文件  
    ├── css/     *.css  文件  
    ├── js/      *.js 文件  
    ├── fonts/   字体文件  
    └── images/   图片  
└── dist/

5、安装各种插件
[plain] view plain copy
 
npm install gulp gulp-imagemin gulp-minify-css gulp-uglify gulp-util gulp-watch-path stream-combiner2 --save-dev  
--save-dev这个命令是将安装的插件信息写入package.json文件内的“devDependencies”属性内,插件全部安装完之后package.json的变化为:

[plain] view plain copy
 
"devDependencies": {  
    "gulp": "^3.9.1",  
    "gulp-imagemin": "^2.3.0",  
    "gulp-minify-css": "^1.2.4",  
    "gulp-uglify": "^1.5.3",  
    "gulp-util": "^3.0.7",  
    "gulp-watch-path": "^0.1.0",  
    "stream-combiner2": "^1.1.1"  
  }

插件安装完毕之后会自动创建一个node_modules文件夹,所有插件的依赖都存在这里面。

gulp——本地gulp
gulp-imagemin——图片压缩
gulp-minify-css ——css压缩
gulp-uglify ——js压缩
gulp-util ——控制台代码着色
gulp-watch-path ——文件很多时编辑那个哪个压缩,不会全部压缩(获取改变的文件的src和dest路径)
stream-combiner2——有些 gulp 任务编译出错会终止 gulp.watch,使用 gulp-watch-path 配合stream-combiner2 可避免这种情况

6、gulp如何使用
控制台输入gulp的时候首先找寻gulpfile.js文件,在找寻default任务,所以我们应该手动新建一个名为gulpfile.js的js文件,将任务写在里面。具体文件目录为:

gulp一共五中方法:

gulp.task()——新建任务

gulp.src()——获取文件源地址

gulp.dest()——文件输出地址

gulp.run()——运行任务

gulp.watch()——监听文件修改

7、编写gulpfile.js文件
(1)引入插件变量

[plain] view plain copy
 
var gulp = require(‘gulp‘),  
    uglify = require(‘gulp-uglify‘),  
    minifycss = require(‘gulp-minify-css‘),  
    imgmin = require(‘gulp-imagemin‘),  
    gutil = require(‘gulp-util‘),  
    watchPath = require(‘gulp-watch-path‘),  
    combiner = require(‘stream-combiner2‘);

(2)新建代码着色与显示错误日志方法,这个方法用到了gulp-util和stream-combiner2插件
[plain] view plain copy
 
var handleError=function(err){  
    console.log(‘\n‘);  
    gutil.log(‘fileName: ‘+gutil.colors.red(err.fileName));  
    gutil.log(‘lineNumber: ‘+gutil.colors.red(err.lineNumber));  
    gutil.log(‘message: ‘ + err.message);  
    gutil.log(‘plugin: ‘ + gutil.colors.yellow(err.plugin));  
};  
(3)新建js批量压缩任务

[plain] view plain copy
 
gulp.task(‘script‘,function(){//script时自定义的  
//将文件的源路径和发布路径赋值给相应变量  
    var srcJsPath=‘js/*.js‘;  
    var destJsPath=‘dist/js/‘;  
    var combined = combiner.obj([  
            gulp.src(srcJsPath),//获取文件源地址  
            uglify(),//执行压缩  
            gulp.dest(destJsPath)//将压缩的文件发布到新路径  
        ]);  
    combined.on(‘error‘, handleError);//打印错误日志  
});

这种写法需要css目录下有很多css文件,只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍,为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件
[plain] view plain copy
 
gulp.task(‘watchjs‘,function(){  
    gulp.watch(‘js/*.js‘,function(event){  
    var paths=watchPath(event,‘js/‘,‘dist/js/‘);  
        //打印修改类型和路径  
        gutil.log(gutil.colors.green(event.type) + ‘ ‘ + paths.srcPath);  
        gutil.log(‘Dist: ‘ + paths.distPath);  
        //获取错误信息,继续执行代码  
        var combined = combiner.obj([  
                gulp.src(paths.srcPath),  
                uglify(),  
                gulp.dest(paths.distDir)  
            ]);  
        combined.on(‘error‘, handleError);  
    });  
});

(4)编写default任务和监听任务
新建批量任务还是监听修改任务根据项目中实际需要去写,等我们写好很多任务之后就需要写入default中,default写好之后只需要在dos窗口写入gulp就可以自动执行任务

[plain] view plain copy
 
gulp.task(‘default‘,function(){  
    //默认执行的方法,引号内的内容对应上面task写的内容  
    gulp.run(‘watchjs‘,‘css‘,‘images‘);  
    //监控js  
    gulp.watch(‘js/*.js‘,[‘watchjs‘]);  
    //监控css  
    gulp.watch(‘css/*.css‘,[‘css‘]);  
    //监控img  
    gulp.watch(‘images/*.*‘,[‘images‘]);  
});

如果不想执行默认任务只执行js单文件压缩任务只需要输入 gulp watchjs即可。控制台输入为下图:

此时,gulp处于监听状态,如果要取消需要按ctrl+c 回车即可。
---------------------
作者:zhangwenwu的前端小站
来源:CSDN
原文:https://blog.csdn.net/zhangwenwu2/article/details/53114204
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/toosuo/p/9900021.html

时间: 2024-09-29 04:25:31

使用gulp构建一个项目的相关文章

使用 gulp 构建一个项目

本章将介绍 gulp-watch-path stream-combiner2 gulp-sourcemaps gulp-autoprefixer 您还可以直接学习以下模块: 安装 Node 和 gulp 使用 gulp 压缩 JS 使用 gulp 压缩 CSS 使用 gulp 压缩图片 使用 gulp 编译 LESS 使用 gulp 编译 Sass 使用 gulp 构建一个项目 并将之前所有章节的内容组合起来编写一个前端项目所需的 gulp 代码. 若你不了解npm 请务必阅读 npm模块管理器

2016-7-15(1)使用gulp构建一个项目

gulp是前端开发过程中自动构建项目的工具,相同作用的还有grunt.构建工具依 靠插件能够自动监测文件变化以及完成js/sass/less/html/image/css/coffee等文件的语法检查.合并.重命名.压缩.格式 化.浏览器自动刷新.部署文件等功能. gulp是基于Nodejs的自动运行器,他借鉴了Unix操作系统的管道(pipe)思想,前一级的输出是后一级的输入.下面是具体流程: 1.安装nodejs nodejs下载地址:https://nodejs.org/ nodejs自带

4、Jenkins 使用maven构建一个项目

一.使用maven构建项目的前提: 请确保jenkins服务器上安装配置了maven软件,如果不清楚如何安装配置,请参考前面第二篇jenkins的安装配置. 二.如何构建一个项目 登录jenkins服务器,在主页左侧菜单栏点击"新建" 在Item名称后面输入项目名称,名字随便起,为避免编码问题,请使用英文.然后选择下面的"构建一个maven项目"点击OK 在源码管理这里选择Git,因为我的代码都在Git仓库里面."Repository URL"这

Gulp构建Android项目,安装APK

Gulp构建Android项目,安装APK 上一节Gulp安装及使用这篇文章中说到,Gulp可以执行终端命令,是不是有很多想法呢,:) 这篇没有多少技术性,仅供娱乐 测试环境 Mac:10.10.4 Gulp:3.9.0 Android studio:1.3 time:2015年08月21日17:29:07 前提 整个Android项目在Android studio中已经编译好,可以正常运行.如果没有编译好的话,只能是在终端输出错误日志了. 文件目录 root |----gulpfils.js

gulp构建自动化项目

'use strict'; var gulp = require('gulp'), browserSync = require('browser-sync').create(), SSI = require('browsersync-ssi'),//多浏览器多设备同步&自动刷新 concat = require('gulp-concat'),//整合文件 uglify = require('gulp-uglify'), //混淆js 暂时没用到 minify = require('gulp-mi

《移动Web前端高效开发实战》笔记2——使用Gulp构建一个ECMAScript 6和Sass应用

8.3.1 安装和配置 运行Gulp需要Node.js环境,请参看第二章内容搭建Node.js环境.使用NPM全局安装Gulp,命令如下: npm install gulp-cli –g 然后,在项目根目录下创建package.json文件,命令如下: npm init 根据引导配置项目信息.然后安装Gulp依赖包,命令如下: npm install gulp –save-dev 在项目根目录下,创建gulpfile.js文件,内容如下: var gulp = require("gulp&quo

Vue+webpack构建一个项目

1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack myapp vue -v 可以查看版本号(V大写)----------------------------构建项目信息详解 - Project name:项目名 - Project description: 项目描述 - Author: 作者 - Vue build: - 第一种:配合大部分的开发人员

grunt构建一个项目

准备工作:grunt基于node环境运行,所有先安装node.js 1.安装grunt,通过node的npm的包管理工具 >npm install grunt --save-dev 2.npm init在项目中引导创建一个package.json文件 >npm init 3.新建一个Gruntfile的js文件,主要是写入grunt的配置 module.exprots = function(grunt){ grunt.initConfig({此处写配置的信息}) }  4.几个常用的插件  

python构建一个项目

二.实验步骤 2.1 实验准备 我们的实验项目名为 factorial. $ mkdir factorial $ cd factorial/ 2.2 主代码 我们给将要创建的 Python 模块取名为 myfact,因此我们下一步创建 myfact 目录. $ mkdir myfact $ cd myfact/ 主代码将在 fact.py 文件里面. "myfact module" def factorial(num): """ 返回给定数字的阶乘值 :a