gulpfile.js 文件常见配置-原创手记-慕课网

一、你也许会想要在编译文件之前删除一些文件。由于删除文件和文件内容并没有太大关系，所以，我们没必要去用一个 gulp 插件。最好的一个选择就是使用一个原生的 node 模块。

npm install --save-dev gulp del

var gulp = require('gulp');
var del = require('del');

gulp.task('clean:mobile', function (cb) {
  del([
    'build/report.csv',
    // 这里我们使用一个通配模式来匹配 `mobile` 文件夹中的所有东西
    'build/mobile/**/*',
    // 我们不希望删掉这个文件，所以我们取反这个匹配模式
    '!build/mobile/deploy.json'
  ], cb);
});

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)文件
    3. 合并JS
    4. 压缩并重命名合并后的js
    5. 自动刷新页面功能

npm  install gulp-jshint --save-dev        jshint 安装失败问题: 解决方案: npm install --save-dev jshint gulp-jshint
npm  install gulp-sass  --save-dev         编译sass文件
npm  install gulp-concat  --save-dev       合并js
npm  install gulp-uglify --save-dev        通过UglifyJS来压缩JS文件.
npm  install gulp-rename  --save-dev       重命名文件的插件，当要把一个文件存储为不同版本时可以使用。比如在需要一个style.css同时你有需要一个style.min.css
npm  install gulp-autoprefixer --save-dev  使用Autoprefixer来补全浏览器兼容的css。
gulp-minify-css                            压缩css,最终是调用clean-css 参考：http://www.ydcss.com/archives/41
gulp-gzip        压缩zip
gulp-imagemin    压缩png/jpg/git/svg 格式图片文件
gulp-util        gulp常用的工具库  在安装gulp时默认已经安装，可以直接使用
gulp-clean  清理档案

【扩展】包安装扩展知识(npm)
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 详细说明
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 二进制文件下载地址：

https://github.com/sass/node-sass/releases/tag/v3.4.2
或者：https://github.com/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

方法二：参考：http://www.th7.cn/web/js/201511/135415.shtml

方法三：使用淘宝代理:
命令：

"SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install"

gulpfile.js 文件常见配置原创