gulpfile.js 文件常见配置
gulpfile.js 文件常见配置
一、你也许会想要在编译文件之前删除一些文件。由于删除文件和文件内容并没有太大关系，所以，我们没必要去用一个 gulp 插件。最好的一个选择就是使用一个原生的 node 模块。
npm install --save-dev gulp del
var gulp = require('gulp');
var del = require('del');
gulp.task('clean:mobile', function (cb) {
'build/report.csv',
// 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
'build/mobile/**/*',
// 我们不希望删掉这个文件，所以我们取反这个匹配模式
'!build/mobile/deploy.json'
gulp.task('default', ['clean:mobile']);
一、安装Node
(1) 安装Node
(2) 切换到项目的前端根目录中，通过命令&npm init&
输入基本的参数，在前端根目录中生成一个package.json文件
二、根据项目前端设定的需求，安装gulp 相关的插件和功能
npm install gulp --save-dev
安装好gulp 后我们需要告诉他要为我们执行哪些前端任务，首先，我们自己需要弄清楚项目需要哪些任务.（根据项目实际情况做出常规前端解决方案）
1. 检查Javascript
2. 编译Sass(less)文件
4. 压缩并重命名合并后的js
5. 自动刷新页面功能
install gulp-jshint --save-dev
jshint 安装失败问题: 解决方案: npm install --save-dev jshint gulp-jshint
install gulp-sass
--save-dev
编译sass文件
install gulp-concat
--save-dev
install gulp-uglify --save-dev
通过UglifyJS来压缩JS文件.
install gulp-rename
--save-dev
重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
install gulp-autoprefixer --save-dev
使用Autoprefixer来补全浏览器兼容的css。
gulp-minify-css
压缩css,最终是调用clean-css 参考：/archives/41
gulp-imagemin
压缩png/jpg/git/svg 格式图片文件
gulp常用的工具库
在安装gulp时默认已经安装，可以直接使用
gulp-clean
【扩展】包安装扩展知识(npm)
npm 使用指南
devDependencies:开发环境，在本地打包所需的模块
dependencies 生产环境
三、根据项目需要配置 gulpfile.js 文件
3.1 说明：gulpfile.js是gulp项目的配置文件，是位于项目根目录的普通js文件（其实将gulpfile.js放入其他文件夹下亦可）。
3.2 gulp只有五个方法:task run watch src dest
3.3 文件配置如下：
//引入gulp，项目文件中安装的gulp的引入方式
var gulp =require('gulp');
//引入组件
var jshint = require("gulp-jshint");
var gutil = require("gulp-util");
var sass= require("gulp-sass");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var path = require("path");
//var webpack = require("webpack");
//var WebpackDevServer = require("webpack-dev-server");
//var webpackConfig = require("./webpack.config.js");//也可以是某个特定目录下(比如:config)的文件、
var del = require("del");
//你也许会想要在编译文件之前删除一些文件
gulp.task('clean', function(cb) {
return del(['build/**/*'], cb);
//检查脚本
gulp.task('lint',function () {
gulp.src('./src/javascript/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'));
//编译sass
//sass 任务会编译scss/目录下的scss文件，并把编译完成的css文件保存到/css目录中
gulp.task('sass',function () {
gulp.src("./src/scss/**/*.scss")
.pipe(sass({outputStyle: 'compact'}))
.pipe(gulp.dest("./build/css"));
//合并，压缩文件
//scipts 任务会合并js 目录下的所有js文件并输出到dist目录中，然后gulp会重命名。压缩合并的文件，也输出到dist/目录
gulp.task('scripts',function () {
gulp.src('./src/javascript/**/*.js')
.pipe(concat('all.js'))
.pipe(gulp.dest('./dest'))
.pipe(rename("all.min.js"))
.pipe(uglify())
.pipe(gulp.dest("./build"))
//这时，我们创建了一个基于其他任务的default任务。
//使用.run()方法关联和运行我们上面定义的任务，使用.watch() 方法去坚挺制定目录的文件变化,当有文件变化时，会运行回调定义的其他任务。
gulp.task('default',function(){
//将你的默认的任务代码放在这里
gulp.run('lint','sass','scripts');
//监听文件变化
gulp.watch("",function () {
gulp.run('lint','sass','scripts');
四、Gulp API 详细说明
：包含了gulpfile文件中某些参数和函数的详细说明信息
1. gulp.src(globs[, options])
1.1、说明：src方法是指定需要处理的源文件的路径，gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件；
1.2、globs：
需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
通配符路径匹配示例：
“src/a.js”：指定具体文件；
“”：匹配所有文件
例：src/.js(包含src下的所有js文件)；
“”：匹配0个或多个子文件夹
例：src//.js(包含src的0个或多个子文件夹下的js文件)；
“{}”：匹配多个属性
例：src/{a,b}.js(包含a.js和b.js文件)
src/.{jpg,png,gif}(src下的所有jpg/png/gif文件)；
“!”：排除文件
例：!src/a.js(不包含src下的a.js文件)；
2. gulp.dest(path[, options])
2.1、说明：dest方法是指定处理完后文件输出的路径；
3. gulp.task(name[, deps], fn)
4.gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
4.1、gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])
4.2、glob： 需要处理的源文件匹配符路径。类型(必填)：String or StringArray；
4.3、tasks：
类型(必填)：StringArray 需要执行的任务的名称数组；
五、安装过程中出现的错误
node-sass的问题导致gulp-sass 安装失败，无法在工程化环境中编译scss文件.
第一步：.node-sass 二进制文件下载地址：
/sass/node-sass/releases/tag/v3.4.2
或者：/sass/node-sass-binaries
第二步：设置环境变量
set SASS_BINARY_PATH=文件地址
第三步：检查（可有可无，最好检查下了）
# for windows
echo %SASS_BINARY_PATH%
第四步：重新安装node-sass
npm install node-sass
node-sass安装时，查看需要的.node文件是否存在。
如果存在就不下载，如果不存在，需要下载。
我们已经告诉node-sass文件已经下载下来了，就在E盘,你去哪里找，他一看确实有，直接使用不再下载。
第五步：重新安装gulp-sass 可以全局-g 也可以在当前项目目录下--save-dev
npm install gulp-sass --save-dev
方法二：参考：
方法三：使用淘宝代理:
&SASS_BINARY_SITE= npm install&
本文原创发布于慕课网 ，转载请注明出处，谢谢合作！
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Web前端工程师
走自己的路，让别人后悔去吧~
作者的热门手记
Copyright (C)
All Rights Reserved | 京ICP备 号-21. 全局安装 gulp：
$ npm install --global gulp
2. 作为项目的开发依赖（devDependencies）安装：
$ npm install --save-dev gulp
3. 在项目根目录下创建一个名为 gulpfile.js 的文件：
var gulp = require('gulp');
gulp.task('default', function() {
// 将你的默认的任务代码放在这
4. 运行 gulp：
默认的名为 default 的任务（task）将会被运行，在这里，这个任务并未做任何事情。
想要单独执行特定的任务（task），请输入 gulp &task& &othertask&。
下一步做什么呢？
你已经安装了所有必要的东西，并且拥有了一个空的 gulpfile。那怎样才算是__真的__入门了呢？可以查看这些
来学习更多的内容。
.src, .watch, .dest, CLI 参数 - 我该怎么去用这些东西呢？
要了解 API 规范文档，请查看 .
可用的插件
gulp 开发社区正在快速成长，每天都会有新的插件诞生。在
上可以查看完整的列表。gulp是基于流的前端自动化构建工具。
之前也谈到了&，grunt其实就是配置+配置的形式。
而gulp呢，是基于stream流的形式，也就是前一个函数（工厂）制造出结果，提供后者使用。
同样的，也是包括基本用法和各插件的使用。
一、环境配置
gulp是基于nodejs的，所以没有&&环境的要先去安装好
然后给系统配上gulp环境
npm install -g gulp
再到某一工程目录下
跟grunt一般，也是需要package.json包依赖文件和一个入口文件 gulpfile.js(其他名字识别不了）
然后就类似的先装上gulp
npm install gulp --save-dev
最基本的使用方式是这样：(使用jshint插件校验js代码）
var jshint = require('gulp-jshint');
gulp.task('myTask',function(){
return gulp.src('main.js')
.pipe(jshint({undef: true}));
然后命令行使用：gulp myTask 即可运行此程序。
二、基本用法--插件使用
gulp所支持的插件也是很多的，使用方式跟基本的nodejs差不多。
下面统一介绍几个常见的&，更详细用法可以到对应官方站点查看API
sass的编译（）
自动添加css前缀（）
压缩css（）
js代码校验（）
合并js文件（）
压缩js代码（）
压缩图片（）
重命名（）
自动刷新页面（）
图片缓存，只有图片替换了才压缩（）
更改提醒（）
清除文件（）
使用它们，就要先install,可以直接在package.json中直接配置devDependencies依赖项，然后再统一 npm install
或者一个一个地安装，依赖项会自动建立。比如安装压缩css的依赖包：
npm install gulp-minify-css --save-dev
这里直接把所以依赖全支持上，因为都要用到。
然后进入 gulpfile.js文件，先直接require
var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
然后，新建一个任务：
gulp.task('styles',function(){
return sass('static/style/test.scss',{style: 'expanded'})
.pipe(autoprefixer('last 2 version','safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('static/style'))
.pipe(rename({suffix:'.min'}))
.pipe(minifycss())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'style done!'}));
解释一下，其实就是 将sass文件编译成css，以流的形式pipe结果，再加css前缀，修改后缀为.min.css，并作资源压缩，最后成功后返回done的消息
命令行键入 gulp styles 成功的话看到done信息，相应css文件也顺利产生。
原本打算直接用src的形式，没料到会出错，难道是&&不支持这种写法？
再试一下 js的
gulp.task('scripts',function(){
return gulp.src('./static/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('./static/script'))
.pipe(rename({suffix:'.min'}))
.pipe(uglify())
.pipe(gulp.dest('./build/static'))
.pipe(notify({message: 'script done!'}));
当然，现在有两个任务了，直接gulp [task]未免太麻烦
命令行 gulp默认执行的是default的任务
所以可以这么玩：
gulp.task('default',['watch'],function(){
gulp.start('styles','scripts');
解释一下，第一个参数是任务1（不一定非得default)，第二个参数也是任务（这个任务可以为空，代表着任务一依赖它（们），任务一执行完才轮到它，当然了，其实我现在这个顺序好像有点..）
这个watch是一个监听的任务，下头会讲到
然后gulp.start 再执行上述的那两个任务。
这样一来，命令行直接gulp就能执行这仨任务了，还能实时监听改变哦~
这个watch的监听任务：
gulp.task('watch',function(){
gulp.watch('./static/style/test.scss',['styles']);
livereload.listen();
gulp.watch('./build/static/test.min.css').on('change',livereload.changed);
解析：第二行是指监听那个scss文件，如果有改动就执行styles的那个任务
& & & & &第三行是开启浏览器端的监听模式
& & & & &第四行是监听某个css文件，比如我html文件引用了这个文件，它变化时浏览器就会自动刷新。
ps: 不过默认情况下可能还是无法监听的，有两种方法：
& & & 装上&&插件(比如chrome上）
& & & 给html代码添加上：
&script&document.write('&script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"&&/' + 'script&')&/script&
& & & 如果是远程机子，非本地的，例如：
&script src="http://192.168.0.1:35729/livereload.js?snipver=1"&&/script&
ok 整个运行一下吧！
shenmegui .. console.log都识别不了，不管了..忽略
不过为什么jshint出错了还会继续下面的操作呢？看了还得截断一下才行
还有图片的压缩imagemin插件
.pipe(cache(imagemin({ optimizationLevel: 5, progressive: true, interlaced: true })))
以及clean插件的使用等：
gulp.task('clean', function(cb) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
当然，gulp任务的执行是异步的，也就是说，任务之间的执行没有先后之分，若想保证执行顺序
只好定义依赖关系（如上述参数二的依赖）
或者使用Promise对象实现，回调函数的使用，&
更多的操作还需到各自插件API查看
总之，gulp比grunt简洁了许多，但因为是基于流的形式，不免又会带来&一些麻烦&。
阅读(...) 评论()}