前端自动化工具环境搭建 整理备份
入门环境搭建
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']);
