Gulpfile.js是什么文件:

gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器;她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成;使用她,我们不仅可以很愉快的编写代码,而且大大提高我们的工作效率。

而gulpfile.js就是帮助gulp实现自动化管理项目功能的核心文件.

步骤1: 在命令行中安装gulp插件(前提是安装了gulp: npm install gulp -g)

可以同时下载多个插件:

cnpm install gulp gulp-less gulp-cssmin gulp-uglify gulp-concat gulp-connect gulp-imagemin open --save-dev

说明1: 因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以建议使用cnpm。

说明2: 项目依赖分两种,

--save:一个就是普通的项目依赖比如bootstrap,还用一种只是开发阶段需要用的,

--save-dev这种属于开发依赖比如gulp,开发依赖最终记录在devDependencies节点里面

说明3: 一些常用的gulp插件:

1. gulp-less: 把less文件转成css文件

2.gulp-clean-css:css文件压缩。
3.gulp-uglify:js压缩
4.gulp-concat:js合并
5.gulp-rename:重命名,给js压缩文件添加.min后缀
6.gulp-jshint:js语法检查

步骤2: 在项目文件夹下面创建一个名叫gulpfile.js的文件夹,在上面的插件下载完毕后,就可以配置相关代码的管理功能了:

步骤3: 开始打开gulpfile.js文件写代码配置(以gulp-less插件为例子):

 var gulp = require('gulp'),//载入gulp模块

     less = require('gulp-less');//载入需要用到的插件
//定义一个testLess任务(自定义任务名称) gulp.task('testLess', function () { gulp.src('less/*.less') //该任务针对的文件 .pipe(less()) //该任务调用的模块 .pipe(gulp.dest('css')); //将会在css下生成index.css }); //监听less文件 gulp.task('gulpWatch',function(){
gulp.watch('less/*.less',['testLess']);
});
//同时让默认程序执行一次,可以提高开始执行速度。 gulp.task('default',['testLess','gulpWatch']);
最后在你的当前项目命令行中输入gulp执行即可。你会看到在相关的路径下生成对应的css文件。

但是,一般我们在公司,都不需要自己去配置这样一个文件,因为每次开发项目的时候都可以使用公司已经配置好的gulpfile.js文件,
把下面的代码拷贝到自己创建的gulpfile.js文件中即可使用: 代码如下:
var app = {  // 定义目录
srcPath:'src/',
buildPath:'build/',
distPath:'dist/'
} /*1.引入gulp与gulp插件 使用时,要去下载这些插件*/
var gulp = require('gulp');
var less = require('gulp-less');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var connect = require('gulp-connect');
var imagemin = require('gulp-imagemin');
var open = require('open'); /*把bower下载的前端框架放到我们项目当中*/
gulp.task('lib',function () {
gulp.src('bower_components/**/*.js')
.pipe(gulp.dest(app.buildPath+'lib'))
.pipe(gulp.dest(app.distPath+'lib'))
.pipe(connect.reload()) //当内容发生改变时, 重新加载。
}); /*2.定义任务 把所有html文件移动另一个位置*/
gulp.task('html',function () {
/*要操作哪些文件 确定源文件地址*/
gulp.src(app.srcPath+'**/*.html') /*src下所有目录下的所有.html文件*/
.pipe(gulp.dest(app.buildPath)) //gulp.dest 要把文件放到指定的目标位置
.pipe(gulp.dest(app.distPath))
.pipe(connect.reload()) //当内容发生改变时, 重新加载。
});
/*3.执行任务 通过命令行。gulp 任务名称*/
/*定义编译less任务 下载对应的插件 gulp-less
* 把less文件转成css放到build
* */
gulp.task('less',function () {
gulp.src(app.srcPath+'style/index.less')
.pipe(less())
.pipe(gulp.dest(app.buildPath+'css/'))
/*经过压缩,放到dist目录当中*/
.pipe(cssmin())
.pipe(gulp.dest(app.distPath+'css/'))
.pipe(connect.reload())
}); /*合并js*/
gulp.task('js',function () {
gulp.src(app.srcPath+'js/**/*.js')
.pipe(concat('index.js'))
.pipe(gulp.dest(app.buildPath+'js/'))
.pipe(uglify())
.pipe(gulp.dest(app.distPath+'js'))
.pipe(connect.reload())
}); /*压缩图片*/
gulp.task('image',function () {
gulp.src(app.srcPath+'images/**/*')
.pipe(gulp.dest(app.buildPath+'images'))
.pipe(imagemin())
.pipe(gulp.dest(app.distPath+'images'))
.pipe(connect.reload())
}); /*同时执行多个任务 [其它任务的名称]
* 当前bulid时,会自动把数组当中的所有任务给执行了。
* */
gulp.task('build',['less','html','js','image','lib']); /*定义server任务
* 搭建一个服务器。设置运行的构建目录
* */
gulp.task('server',['build'],function () {
/*设置服务器*/
connect.server({
root:[app.buildPath],//要运行哪个目录
livereload:true, //是否热更新。
port:9999 //端口号
})
/*监听哪些任务*/
gulp.watch('bower_components/**/*',['lib']);
gulp.watch(app.srcPath+'**/*.html',['html']);
gulp.watch(app.srcPath+'js/**/*.js',['js']);
gulp.watch(app.srcPath+'images/**/*',['image']);
gulp.watch(app.srcPath+'style/**/*.less',['less']); //通过浏览器把指定的地址 (http://localhost:9999)打开。
open('http://localhost:9999');
}); /*定义默认任务
* 直接执行gulp 会调用的任务
* */
gulp.task('default',['server']);

gulp的使用(二)之gulpfile.js文件的配置的更多相关文章

  1. node入门(二)——gulpfile.js初探

    本文关于gulpfile.js怎么写,利于完成个性化需求.本文开发环境默认已安装node,详情参考<node入门(一)——安装>. 一.安装gulp npm install -g gulp ...

  2. gulp压缩html,css,js文件流程、监听任务、使用gulp创建服务器、同时运行多个任务、反向代理

    一.初始化 首先先做一个项目初始化,用来记录你项目中用到的工具 再你项目文件下打开一个控制台,输入命令 yarn init -y 进行初始化 输入命令yarn add gulp -g  --- 全局安 ...

  3. 编写gulpfile.js文件:压缩合并css、js

    使用gulp一共有四个步骤: 1. 全局安装 gulp: $ npm install --global gulp 2. 作为项目的开发依赖(devDependencies)安装: $ npm inst ...

  4. gulp 图片、样式、js、实时刷新等压缩gulpfile.js文件各个模块

    1.压缩tinypng图片   gulp-tinypng-nokey,但不压缩gif格式(另外一个gulp-imagemin压缩率不高,可以压缩gif格式) // 获取 gulp var gulp = ...

  5. webpack教程(二)——webpack.config.js文件

    首先我们需要安装一个webpack插件html-webpack-plugin,该插件的作用是帮助我们生成创建html入口文件.执行如下命令 npm install html-webpack-plugi ...

  6. grunt 一个目录下所有的js文件压缩 配置收藏

    module.exports = function(grunt){ // 项目配置 grunt.initConfig({ pkg: grunt.file.readJSON('package.json' ...

  7. MySQL复制(二)--基于二进制日志文件(binlog)配置复制

    基础环境:   主库 从库 服务器IP地址 192.168.10.11 192.168.10.12 版本 5.7.24 5.7.24 已存在的数据库 mysql> show databases; ...

  8. vue-cli 3.x搭建项目以及其中vue.config.js文件的配置

    参考链接:https://www.cnblogs.com/wxh0929/p/11271551.html vue-cli3全面配置详解:https://www.jb51.net/article/150 ...

  9. 关于 vue.config.js 文件的配置

    相关文档: https://cli.vuejs.org/zh/config/#vue-config-js

随机推荐

  1. 2018-2019-2 网络对抗技术 20165303 Exp1 PC平台逆向破解(BOF实验)

    1.实践目的 本次实践的对象是一个名为pwn1的linux可执行文件. 三个实践内容如下: 手工修改可执行文件,改变程序执行流程,直接跳转到getShell函数. 利用foo函数的Bof漏洞,构造一个 ...

  2. android ------ AAPT2 error: check logs for details解决方法

    AAPT 是全称是 Android Asset Packaging Tool,它是构建 App,甚至是构建 Android 系统都必不可少的一个工具.它的作用是将所有资源文件压缩打包到Android ...

  3. linux 复制文件

    1 复制指定目录下的全部文件到另一个目录中. 若dir2目录不存在,则可以直接使用: cp -r dir1 dir2 若dir2目录存在,则需要使用: cp -r dir1/. dir2 若dir2目 ...

  4. (05) SpringBoot开发RESTFull?

    1. 什么是RESTFull? RESTFull 一种互联网软件架构设计的风格,但它并不是标准,它只是提出了一组客户端和服务器交互时的架构理念和设计原则,基于这种理念和原则设计的接口可以更简洁,更有层 ...

  5. redis常用命令使用集

    redis集群:https://www.cnblogs.com/PatrickLiu/p/8435214.html Redis命令总结 1.基于内存的key-value数据库 2.基于c语言编写的,可 ...

  6. There are multiple modules with names that only differ in casing. 黄色warning

    There are multiple modules with names that only differ in casing.有多个模块同名仅大小写不同This can lead to unexp ...

  7. 浏览器与WEB服务器交互

    问题:打开浏览器,在地址栏输入url到页面展现,整个过程发生了什么? 图示: 步骤: 1 用户输入网址,包括协议和域名. 2 浏览器先查找自身缓存有没有记录,没有的话再找操作系统缓存. 3 当浏览器在 ...

  8. Tensorflow常用的函数:tf.cast

    1.tf.cast(x,dtype,name) 此函数的目的是为了将x数据,准换为dtype所表示的类型,例如tf.float32,tf.bool,tf.uint8等 example:  import ...

  9. day47-python爬虫学习二

    2.Request的会话对象 s = requests.session() Python2 S = requests.Session() 所有一次会话的信息都保存在s中,只需要对s进行操作就可以了. ...

  10. Archery:开源漏洞评估和管理工具

    Archery:开源漏洞评估和管理工具