前端自動化工具環境搭建整理備份

時間 2019-11-13

原文原文鏈接

入門環境搭建javascript

webpack 入門環境搭建css

gulp 入門環境搭建html

個人 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命令進行打包。java

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']);