前端自动化工具环境搭建 整理备份

入门环境搭建

 

 

 

webpack  入门环境搭建

 

gulp  入门环境搭建

 

我的 gulp 配置文件

//A 加载插件：
// 1 引入 gulp及组件
var gulp = require(\'gulp\'),   //* /这个是必须安装的，没有它，其它组件都用不了（注意watch组件直接集成在gulp中了，无需额外安装watch组件）
  
    minifycss = require(\'gulp-clean-css\'),      //压缩css   ulp-minify-css 已被废弃 
    uglify = require(\'gulp-uglify\'),            //压缩JS  *
    imagemin = require(\'gulp-imagemin\'),       //压缩图片  *
     htmlmin = require(\'gulp-htmlmin\'),  //gulp-htmlmin本身就有对页面上js、css的压缩支持，配置参数即可，无需再使用其他插件
    requirejsOptimize = require(\'gulp-requirejs-optimize\'),   //require 打包文件
   
 
   // jshint = require(\'gulp-jshint\'),            //js代码校验
    rename = require(\'gulp-rename\'),             
    concat = require(\'gulp-concat\'), //合并js文件
    notify = require(\'gulp-notify\'),  //更改提醒
    cache = require(\'gulp-cache\'),   //缓存当前任务中的文件，只让已修改的文件通过管道  *
    livereload = require(\'gulp-livereload\'), //自动刷新页面   当代码变化时，它可以帮我们自动刷新页面 插件最好配合谷歌浏览器来使用，且要安装livereload chrome extension扩展插件,不能下载的请自行FQ。
    del = require(\'del\'); 
    
  var rjs = require(\'requirejs\');   //https://github.com/phated/requirejs-example-gulpfile/blob/master/gulpfile.js
 
 
 //npm update -g minimatch@3.0.2
//npm install gulp-autoprefixer gulp-clean-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
   
 //B 建立任务： 
 //gulp.task(name[, deps], fn) 定义任务  name：任务名称 deps：依赖任务名称 fn：回调函数
//gulp.src(globs[, options]) 执行任务处理的文件  globs：处理的文件路径(字符串或者字符串数组) 
//gulp.dest(path[, options]) 处理完后文件生成路径
 
 
 //0 管理html
gulp.task(\'html\', function () {
    var options = {
        removeComments: true,  //清除HTML注释
        collapseWhitespace: true,  //压缩HTML
        collapseBooleanAttributes: true,  //省略布尔属性的值 <input checked="true"/> ==> <input checked />
        removeEmptyAttributes: true,  //删除所有空格作属性值 <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,  //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,  //删除<style>和<link>的type="text/css"
        minifyJS: true,  //压缩页面JS
        minifyCSS: true  //压缩页面CSS
    };
    gulp.src(\'src/*.html\')
        .pipe(htmlmin(options))
        .pipe(gulp.dest(\'dist/\'))
        .pipe(notify({ message: \'html task complete\' }));
});
 
// 1管理样式 Styles
gulp.task(\'pagestyles\', function() {
return gulp.src(\'src/css/pages/*.css\')  //需要压缩的css 
       // .pipe(rename({ suffix: \'.min\' }))  //重命名
        .pipe(minifycss())  //压缩
        .pipe(gulp.dest(\'dist/css/pages\'))  //压缩到新的目录
        .pipe(notify({ message: \'pages styles  task complete\' }));  //通知
});

gulp.task(\'commonstyles\', function() {
return gulp.src(\'src/css/common/*.css\')  //需要压缩的css 
        //.pipe(rename({ suffix: \'.min\' }))  //重命名
        .pipe(minifycss())  //压缩
        .pipe(gulp.dest(\'dist/css/common\'))  //压缩到新的目录
        .pipe(notify({ message: \'common styles  task complete\' }));  //通知
});





//2 管理脚本  script

gulp.task(\'pagesjs\', function() {
  return gulp.src(\'src/js/pages/*.js\')
   // .pipe(jshint())  // js代码检查
   // .pipe(jshint.reporter()) // 输出检查结果
    //.pipe(concat(\'all.js\'))
    //.pipe(rename({ suffix: \'.min\' }))
    .pipe(uglify())
    .pipe(gulp.dest(\'dist/js/pages/\'))
    .pipe(notify({ message: \'pagesjs task complete\' }));
});

gulp.task(\'commonjs\', function() {
  return gulp.src(\'src/js/common/*.js\')
  //  .pipe(jshint(\'.jshintrc\'))
    //.pipe(jshint.reporter(\'default\'))
    //.pipe(concat(\'all.js\'))
   // .pipe(rename({ suffix: \'.min\' }))
    .pipe(uglify())
    .pipe(gulp.dest(\'dist/js/common/\'))
    .pipe(notify({ message: \'commonjs task complete\' }));
});



//3 管理图片  Images

gulp.task(\'imagesview\', function() {
  return gulp.src(\'src/images/view/*.{png,jpg,gif,ico}\')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
     // 取值范围：0-7（优化等级）,是否无损压缩jpg图片，是否隔行扫描gif进行渲染，是否多次优化svg直到完全优化
    .pipe(gulp.dest(\'dist/images/view/\'))
    .pipe(notify({ message: \'Images1 task complete\' }));
});
gulp.task(\'imagespic\', function() {
  return gulp.src(\'src/images/pic/*\')
    .pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
    .pipe(gulp.dest(\'dist/images/pic/\'))
    .pipe(notify({ message: \'Images2 task complete\' }));
});



// Clean  任务执行前，先清除之前生成的文件
gulp.task(\'clean\', function(cb) {
   del([\'dist/css/*\', \'dist/js/*\'], cb);
});



 //C 监听文件:
 // Watch

gulp.task(\'watch\', function(event) {  // 使用Ctrl+c退出任务
      //console.log(event.changed); //变化类型 added为新增,deleted为删除，changed为改变 
    
    //Watch *html files
    gulp.watch(\'src/*.html\', [\'html\']); //* ok
    
  // Watch .css files
   gulp.watch(\'src/css/common/*.css\', [\'commonstyles\']);
   gulp.watch(\'src/css/pages/*.css\', [\'pagestyles\']); //* ok
   
  // Watch .js files
  //gulp.watch(\'src/js/*/*.js\', [\'pagesjs,commonjs\']);  //这个不可以  暂时不知到为啥
  gulp.watch(\'src/js/pages/*.js\', [\'pagesjs\']);
  gulp.watch(\'src/js/common/*.js\', [\'commonjs\']);
  
  // Watch image files
  //gulp.watch(\'src/images/*/*\', [\'imagesview\',\'imagespic\']);
  gulp.watch(\'src/images/view/*\',[\'imagesview\']);
  gulp.watch(\'src/images/pic/*\', [\'imagesview\']);
  
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch([\'dist/**\']).on(\'change\', livereload.changed);

});
 
 ///D 设定默认任务    每个gulpfile.js里都应当有一个dafault任务，它是缺省任务入口（类似C语言的main()
 gulp.task(\'default\', function () {  
       //gulp.run(\'sass\',\'minjs\',\'mincss\');   //gulp.run(tasks)表示运行对应的任务，这里表示执行名为\'sass\',\'minjs\',\'mincss\'的三个任务
    gulp.run(\'watch\');    //执行\'watch\'监听任务
 })
 

 

关于前端跨域调试

在进行接口请求时，我们的页面通常是在sublime的本地服务器或者vscode本地服务器预览，所以请求接口会遇到跨域的问题。
在项目构建的时候通常我们源代码会放在src文件夹下，然后使用gulp进行代码的压缩、合并、图片的优化（根据需要）等等，我们会使用gulp。这里解决跨域的问题可以用gulp-connect结合http-proxy-middleware，此时我们在gulp-connect中的本地服务器进行预览调试。
gulpfile.js如下： 开发过程使用gulp server命令，监听文件改动并使用livereload刷新；使用gulp命令进行打包。

var gulp = require(\'gulp\');
var concat = require(\'gulp-concat\');
var uglify = require(\'gulp-uglify\');
var autoprefixer = require(\'gulp-autoprefixer\');
var useref = require(\'gulp-useref\');
var connect = require(\'gulp-connect\');
var proxyMiddleware = require(\'http-proxy-middleware\');
// 定义环境变量，若为 dev，则代理src目录； 若为prod，则代理dist目录
var env = \'prod\'
// 跨域代理  将localhost:8088/api 映射到 https://api.shujumohe.com/
gulp.task(\'server\', [\'listen\'], function() {
    var middleware = proxyMiddleware([\'/api\'], {
        target: \'https://api.shujumohe.com/\',
        changeOrigin: true,
        pathRewrite: {
            \'^/api\': \'/\'
        }
    });
    connect.server({
        root: env == \'dev\' ? \'./src\' : \'./dist\',
        port: 8088,
        livereload: true,
        middleware: function(connect, opt) {
            return [middleware]
        }
    });
});
gulp.task(\'html\', function() {
    gulp.src(\'src/*.html\')
        .pipe(useref())
        .pipe(gulp.dest(\'dist\'));
});
gulp.task(\'css\', function() {
    gulp.src(\'src/css/main.css\')
        .pipe(concat(\'main.css\'))
        .pipe(autoprefixer({
            browsers: [\'last 2 versions\'],
            cascade: false
        }))
        .pipe(gulp.dest(\'dist/css/\'));
    gulp.src(\'src/css/share.css\')
        .pipe(concat(\'share.css\'))
        .pipe(autoprefixer({
            browsers: [\'last 2 versions\'],
            cascade: false
        }))
        .pipe(gulp.dest(\'dist/css/\'));
    gulp.src(\'src/vendors/css/*.css\')
        .pipe(concat(\'vendors.min.css\'))
        .pipe(autoprefixer({
            browsers: [\'last 2 versions\'],
            cascade: false
        }))
        .pipe(gulp.dest(\'dist/vendors/css\'));
    return gulp
});
gulp.task(\'js\', function() {
    return gulp.src(\'src/vendors/js/*.js\')
        .pipe(concat(\'vendors.min.js\'))
        .pipe(uglify())
        .pipe(gulp.dest(\'dist/vendors/js\'));
});
gulp.task(\'img\', function() {
    gulp.src(\'src/imgs/*\')
        .pipe(gulp.dest(\'dist/imgs\'));
});
gulp.task(\'listen\', function() {
    gulp.watch(\'./src/css/*.css\', function() {
        gulp.src([\'./src/css/*.css\'])
            .pipe(connect.reload());
    });
    gulp.watch(\'./src/js/*.js\', function() {
        gulp.src([\'./src/js/*.js\'])
            .pipe(connect.reload());
    });
    gulp.watch(\'./src/*.html\', function() {
        gulp.src([\'./src/*.html\'])
            .pipe(connect.reload());
    });
});
gulp.task(\'default\', [\'html\', \'css\', \'js\', \'img\']);