关键词：
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插件为例子):
1 var gulp = require(‘gulp‘),//载入gulp模块 2 3 less = require(‘gulp-less‘)；//载入需要用到的插件 4 //定义一个testLess任务（自定义任务名称） 5 6 gulp.task(‘testLess‘, function () { 7 8 gulp.src(‘less/*.less‘) //该任务针对的文件 9 10 .pipe(less()) //该任务调用的模块 11 12 .pipe(gulp.dest(‘css‘)); //将会在css下生成index.css 13 14 }); 15 16 //监听less文件 17 18 gulp.task(‘gulpWatch‘,function(){ 19 gulp.watch(‘less/*.less‘,[‘testLess‘]); 20 }); 21 //同时让默认程序执行一次，可以提高开始执行速度。 22 23 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教程之静态资源压缩(代码片段)
...项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件，项目目录如下：2压缩插件简介gulp-useref合并html里面的js/cssgulp-concat用于合并文件，把也就是多个文件合并到一个文件中，以节省存储空间gulp.spritesmith图片合... 查看详情
gulp的使用
...目本地会自动生成package.json配置文件4.在项目根目录创建gulpfile.js文件5,在gulpfile.js中写vargulp=require(‘gulp‘);//引入gulp 查看详情
gulp（gulpfile.js）配置文件
1/*2参考代码网址：3http://www.ido321.com/1622.html4http://colobu.com/2014/11/17/gulp-plugins-introduction/#gulp-rename5https://github.com/nimojs/gulp-book6*/7//获取gulp8vargulp=require(‘gulp‘),9//js压缩插件（用于压缩JS 查看详情
gulp简介gulp基本使用步骤gulp-cli工具gulpfile.js文件gulp插件(代码片段)
...a;1.使用npminstallgulp下载gulp库文件。2.在项目文件夹中新建gulpfile.js文件&# 查看详情
gulp教程之自动添加版本号(代码片段)
...项目安装nodejs/全局安装gulp/本地安装gulp/创建package.json和gulpfile.js文件，项目目录如下：2自动更改版本号插件简介gulp-rev为css文件中引入的图片或字体等添加hash编码gulp-asset-rev为js/css文件生成hash编码并生成rev-manifest.json文件名对... 查看详情
gulp
...：npminstall--save-devgulp3.在项目根目录下创建文件名字为：gulpfile.js4.配置当前gulpfile.js文件5.执行gulp测试语法：1.gulp.src:方法读取你需要操作的文件2.gulp.dest:方法用来写文件3.gulp.task:方法用来定义任务的4.gulp.watc 查看详情
前端自动化之项目搭建
1.先安装全局的gulp$npminstall--globalgulp2.npm初始化，在项目内创建package.json文件npminit3.项目文件路径下，将gulp安装到项目内。$npminstall--save-devgulp4.创建gulp主文件==》gulpfile.js 5.编写gulpfile.js测试代码：vargulp=require(‘gulp‘);gulp.ta 查看详情
gulp压缩js
...nodejs->全局安装gulp->项目安装gulp以及gulp插件->配置gulpfile.js->运行任务2、查看nodejs的版本号3、npm的版本号4、定位目标5、全局安装gulp6、新建package.json文件多了两个文件7、本地安装gulp插件8、新建gulpfile.js文件（重要）var... 查看详情
gulp配置版本号教程之gulp-rev-append
...。1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件1.1、gulp基本使用还未掌握？请参看： gulp详细入门教程1.2、本示例目录结构如下：2、本地安装gulp-rev-append2.1、github：https://github.com/ 查看详情
gulp构建工作流(代码片段)
gulp构建工作流以及gulpfile.js文件###步骤：1.命令行创建npm的配置文件a.npminit（这时候生成一个package.json的文件）2.添加一个gulp的依赖npminstallgulp--save-dev3.在项目根目录下添加一个gulpfile.js文件，这个是gulp的主文件，这个文件名是... 查看详情
gulp学习-gulpfile
...npminstallgulp--save-dev3、在项目根目录下创建一个名为 gulpfile.js 的文件vargulp=require( 查看详情
gulp的使用安装
...项目下安装）gulp的基本用法：建一个js文件并命名为 gulpfile.js ，把下面的代码粘贴进去：gulpfile.js//引入gulpvargulp=require(‘gulp‘) 查看详情
前端构建工具gulp.js你知多少..(webpack/gulp/grunt)
...起步照搬官网文档1.安装2.在项目根目录下创建一个名为gulpfile.js的文件：3.运行gulp：默认的名为default的任务（task）将会被运行，在这里，这个任务并未做任何事情。具体详情可以查看gulpjs.com文档新建一个项目gulp-test环境:1.新建... 查看详情
如果 gulp 安装在与 gulpfile.js 不同的文件夹中（node_modules），你如何运行 gulp
】如果gulp安装在与gulpfile.js不同的文件夹中（node_modules），你如何运行gulp【英文标题】：Howdoyourungulpifgulpisinstalled(node_modules)indifferentfolderthangulpfile.js【发布时间】：2015-11-2211:52:11【问题描述】：我在一个目录中有gulpfile.js，在另... 查看详情
glup快速入门整理(代码片段)
...建一个简单的应用gulp_test|-dist|-src|-js|-css|-less|-index.html|-gulpfile.js-----gulp配置文件|-package.json"name":"gulp_test","version":"1.0.0"安装gulp:全局安装gulpnpminstallgulp-g局部安装gulpnpminstallgulp--save-dev配置编码:gulpfile.js//引入gulp模块vargulp=require(‘g... 查看详情
gulp的使用方法
gulp的使用方法首先下载插件在gulpfile.js里面写‘搬运‘代码：//得到gulp对象vargulp=require(‘gulp‘);//新建任务gulp.task(‘script‘,function(){//匹配gulp.src(‘./js/index.js‘).pipe(gulp.dest(‘./js/dist‘));//指定输出的**目录**});在gulpfile.js里面写... 查看详情
gulp的简单使用
...请先看看自己有没有安装nodejs）npminstall2、根据需求调节gulpfile.js（gulpfile.js如下，可根据需求删除与添加）//lastUpdateDate:2016.09.17//description:gulp是通过构建一个个任务机械化的帮我们完成重复性质的工作‘usestrict‘//在gulpfile中先... 查看详情
Gulp 循环配置文件和合并任务...慢
...lp和config.json文件自动执行我的js任务，因此我不需要打开gulpfile.js，而只需打开配置文件。我的代码看起来不错并且正在运行……但是Gulp在10秒内完成了任务！我正在寻找一种更快完成任务的方法。在配置文件中 查看详情