標註 依然 版本 port require 瀏覽器內核 on() version -c

在過去前端開發一直沒有完善的一些代碼處理等工具來富足開發，而nodejs火起來之後，很多基於node環境的工具誕生之後對前端開發造成了沖擊，慢慢的，使用這些工具來完成項目的搭建和開發這樣的方式被稱為前端工程化。 使用工程化開發項目原因： 現在的項目不論是規模還是復雜度都有很大程度提高，所以如何快速搭建環境以及搞笑的代碼管理，後期處理成為了衡量前端工程師技術的標準 工程化幫我們： 構造環境變得簡單、自動化，代碼的壓縮合並，模塊化，抽離都能一步完成，減少了後期處理成本。 現有的工程化工具： grunt、gulp是自動化構建工具，webpack是模塊化打包工具，bower、npm是包管理工具 gulp使用方式： 基於流的自動化構建工具。 因為gulp運行在nodejs中，所以遵循commonjs模塊化規範，gulp使用通過創建和執行任務來完成 關鍵方法： 1.gulp.task()創建任務 2.gulp.src()查找資源文件 3.gulp.desk()輸出文件 4.gulp.watch(）監聽文件內容變化 5. .pipe()可以對文件進行處理 gulp只提供查找、監聽文件，處理後輸出文件，但是如何處理都不屬於gulp的功能範圍 工程化的實現： 1、建立項目目錄 2、在項目中執行npm init應該有一個package.json文件，標註項目相關信息。 3、選擇gulp + gulp-webpack + 進行項目的開發 4、全局安裝gulp : npm install gulp --global 在項目中安裝gulp依賴：npm install gulp --save-dev(-D) 5、建立開發目錄以及依賴等 6、建立gulpfile.js文件，在這裏可以發布任務，通過命令行執行任務 。。。 工程化的詳細實現 1、熱更新服務器 npm i gulp-webserver -D 2、配置sass開發環境 sass並不能被瀏覽器直接識別，需要編譯成css在引入 sass的底層是ruby，在nodejs中需要使用node-sass工具幫助編譯 .sass .scss 先安裝[email protected] npm install -g [email protected] npm install [email protected] -D 在安裝gulp中的編譯sass的工具 npm install gulp-sass -D 註意：在編譯sass時，以保存就報錯，在編譯就好了 原因：設備優勢反應不過來，按下保存按鈕時gulp-sass在編譯sass時，其他的模塊任務已經開始運行 解決：在編譯sass的位置包上一個settimeout 註意：在sass裏應該模塊化開發 3、合並sass文件 npm install -D gulp-concat 4、css兼容處理 在移動端中瀏覽器內核都是webkit，但是css依然要加前綴，而彈性盒的語法有兩個版本，他們基本不同。 codepen.io 可以在此在線寫代碼，做css兼容，找好看效果 gulp-autoprefixer 5、js模塊化編譯打包 npm i gulp-webpack -D 用babel編譯es6，用gulp-uglify壓縮js，gulp-rename重命名 6、dom const gulp = require("gulp") const concat = require(‘gulp-concat‘)//合並 const cleanCSS = require(‘gulp-clean-css‘);//壓縮css const autoprefixer = require(‘gulp-autoprefixer‘);//css兼容 const webserver = require("gulp-webserver")//熱更新模塊 //熱更新服務的任務 gulp.task(‘server‘,function () { gulp.src(‘./‘). pipe(webserver({ host:"localhost", port:9000, livereload :true , //是否熱更新 directoryListing :true })) }) const sass = require(‘gulp-sass‘)//處理sass的模塊 gulp.task(‘sass‘,function () {//編譯sass的任務 // setTimeout(function(){ gulp.src(‘./src/sass/**/*.scss‘). pipe(sass({outputStyle:‘compressed‘}).on(‘error‘, sass.logError)) .pipe(concat(‘index.css‘)) // .pipe(cleanCSS({compatibility: ‘ie8‘})) .pipe(autoprefixer({ browsers: [‘last 2 versions‘], cascade: false })) .pipe(gulp.dest("./build/css")) // },200) }) //js處理 const webpack = require(‘gulp-webpack‘) const uglify = require(‘gulp-uglify‘); const rename = require(‘gulp-rename‘) gulp.task("packjs",function(){ gulp.src("./src/js/index.js") .pipe(webpack({ output:{ filename:‘index.js‘ }, module:{ loaders:[ { test:/\.js$/, loader:"babel-loader", query:{ presets:[‘es2015‘] } } ] } })) .pipe(uglify()) .pipe(rename({ suffix: ".min" })) .pipe(gulp.dest(‘./build/js‘)) }) //監聽sass任務 gulp.task(‘watch:sass‘,function () { gulp.watch(‘./src/sass/**/*.scss‘,[‘sass‘]) }) //監聽js任務 gulp.task(‘watch:js‘,function () { gulp.watch(‘./src/js/**/*.js‘,[‘packjs‘]) }) //默認任務 gulp.task(‘default‘,[‘sass‘,‘watch:sass‘,‘packjs‘,‘watch:js‘,‘server‘])

前端工程化淺析