gulp搭建框架，起前端服务步骤

gulp创建项目

1、新建项目文件夹，  npm init

2、全剧安装gulp        npm install -g gulp

3、修改package.json添加

package.json

"devDependencies": {
    "gulp": "^3.9.1", //本地gulp
    "gulp-imagemin": "^2.3.0", //图片压缩
    "gulp-minify-css": "^1.2.4", //css压缩
    "gulp-uglify": "^1.5.3", //js压缩
    "gulp-util": "^3.0.7", //控制台代码着色
    "gulp-watch-path": "^0.1.0", //文件很多时编辑哪个哪个压缩，不会全部压缩（获取改变的文件的src和dest路径）
    "stream-combiner2": "^1.1.1" //有些 gulp 任务编译出错会终止       gulp.watch，使用 gulp-watch-path 配合stream-combiner2 可避免这种情况
}

4、执行npm install

5、新建gulpfile.js文件，gulp功能如下

　　gulp一共五中方法：

　　gulp.task()——新建任务

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

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

　　gulp.run()——运行任务

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

6、修改gulpfile.js文件（根据项目架构设置路径）目的：起动前端服务，将app中的css、js、html、等文件打包到dist文件中

　　

//引入插件变量
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'); 
const browserSync = require('browser-sync');

//新建代码着色与显示错误日志方法，这个方法用到了gulp-util和stream-combiner2插件
var handleError=function(err){  
    console.log('
');  
    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));  
};  

//新建js批量压缩任务
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);//打印错误日志  
});

//图片打包
gulp.task('images', () => {
  return gulp.src('app/images/**/*')
    //.pipe($.cache($.imagemin({
    //  progressive: true,
    //  interlaced: true,
    //  // don't remove IDs from SVGs, they are often used
    //  // as hooks for embedding and styling
    //  svgoPlugins: [{cleanupIDs: false}]
    //})))
    .pipe(gulp.dest('dist/images'));
});

//这种写法需要css目录下有很多css文件，只要改变了一个点击保存的时候gulp会把所有css文件都会压缩一遍，为了提高性能我们可以利用gulp-watch-path插件只压缩/发布修改的文件
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);  
    });  
}); 


//编写default任务和监听任务
//新建批量任务还是监听修改任务根据项目中实际需要去写，等我们写好很多任务之后就需要写入default中，default写好之后只需要在dos窗口写入gulp就可以自动执行任务
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']);  
});

gulp.task('serve', [], () => {
  browserSync({
    notify: false,
    port: 3000,
    ghostMode: false,
    server: {
      baseDir: ['app']
    },
    // middleware: [proxy('/api', {
    //   target: 'http://apidev.e.com',
    //   changeOrigin: true
    // })]
  });

  // gulp.watch([
  //   'app/*.html',
  //   'app/images/**/*'
  // ]).on('change', reload);

  // gulp.watch('app/styles/**/*.scss', ['styles']);
  // gulp.watch('app/scripts/helpers/tsf/**/*.scss', ['styles']);
  // gulp.watch('app/scripts/**/*.js', ['styles']);
  // gulp.watch('app/fonts/**/*', ['fonts']);
  // gulp.watch('bower.json', ['wiredep', 'fonts']);
});