摘要:記錄下學習過程使用的一些經驗我的文件夾目錄是這樣的功能需求如下在任意子目錄下修改文件后自動編譯在對應項目文件夾的文件夾下在任意子目錄下修改文件后都自動刷新瀏覽器增加了壓縮文件的需求,需要
記錄下學習過程使用gulp的一些經驗
我的文件夾目錄是這樣的|-- project |-- child-project |-- src |-- html |-- less |-- js |-- img |-- dist |-- html |-- css |-- js |-- img功能需求如下
實際配置在 project任意子目錄下修改less文件后自動編譯在對應項目文件夾的css文件夾下
在 project任意子目錄下修改html、js、less文件后都自動刷新瀏覽器
2017-12-14
增加了壓縮文件的需求,需要將src中的js文件/img/css文件進行壓縮,壓縮至dist文件夾下
增加了檢查js代碼
//編譯與刷新瀏覽器 //導入工具包 var gulp = require("gulp"), less = require("gulp-less"), browserSync = require("browser-sync").create(), browserReload = browserSync.reload, rename = require("gulp-rename"); //定義less編譯任務 gulp.task("lessCompile", function() { gulp.src("./project/**/*.less") //該任務針對的文件 .pipe(less())//該任務調用的模塊 .pipe(rename(function(path) { return path.dirname = path.dirname.replace("less", "css"); })) .pipe(gulp.dest("./project")) .pipe(browserReload({stream: true})); }); //監聽 本地 less/html/js 文件 gulp.task("serve", function(){ //監聽本地文件 browserSync.init({ server: { baseDir: "./project", directory: true } }); //監聽less gulp.watch("./project/**/*.less", ["lessCompile"]); //監聽html gulp.watch("./project/**/*.html").on("change", browserReload); //監聽js gulp.watch("./project/**/*.js").on("change", browserReload); }); //定義默認任務 gulp.task("default", ["serve"]);
//代碼檢查和壓縮 gulp.task("jsHint", function() { gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//檢查的文件,忽略dist中的js文件 .pipe(jshint(jshintConfig))//檢查 .pipe(jshint.reporter("default")); // 輸出檢查結果 }); //定義js壓縮任務(css與img同此,更換插件即可) gulp.task("jsmin", function() { gulp.src(["./project/**/*.js", "!./project/**/dist/**/*.js"])//壓縮的文件,忽略dist中的js文件 .pipe(uglify())//壓縮 //.pipe(rename({suffix:".min"}))//增加min后綴 .pipe(rename(function(path) { return path.dirname = path.dirname.replace("src", "dist"); }))//壓縮至dist文件夾 .pipe(gulp.dest("./project")); });參考學習
http://www.cnblogs.com/2050/p...,src與dest的路徑學習參考此文
http://www.ydcss.com/archives/18 gulp的詳細入門指南
http://blog.csdn.net/u0137205... jshint的參數的配置
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89287.html
摘要:流式構建改變了底層的流程控制,大大提高了構建工作的效率和性能,給用戶的直觀感覺就是更快。我的看法關于流式構建,短短幾句話無法講清它的來龍去脈,但是在的世界里,確實是至關重要的。 Grunt 一直是前端領域構建工具(任務運行器或許更準確一些,因為前端構建只是此類工具的一部分用途)的王者,然而它也不是毫無缺陷的,近期風頭正勁的 gulp.js 隱隱有取而代之的態勢。那么,究竟是什么使得 g...
摘要:承接前一篇做一個合格的前端,自動化構建工具入門教程故而整理了如下插件資源大全。接下來我會逐一開源觀點網開發過程中的前后端技術,如全文索引自定義富文本編輯器圖片上傳壓縮水印等等。 承接前一篇《做一個合格的前端,gulp自動化構建工具入門教程》故而整理了如下gulp插件資源大全。**【我的新作觀點網:http://www.guandn.com (觀點網是一個獵獲新奇、收獲知識、重在獨立思考...
摘要:了解什么是官方文檔是這樣介紹的點我了解官方文檔簡單的來說,可以看做是模塊打包機它做的事情是,分析你的項目結構,找到模塊以及其它的一些瀏覽器不能直接運行的拓展語言,等,并將其轉換和打包為合適的格式供瀏覽器使用。 了解webpack 什么是webpack 官方文檔是這樣介紹的:點我了解官方文檔 簡單的來說,WebPack可以看做是模塊打包機:它做的事情是,分析你的項目結構,找到JavaSc...
摘要:哈哈,我理解,架構就是骨架,如下圖所示譯年月個有趣的和庫前端掘金我們創辦的使命是讓你及時的了解開發中最新最酷的趨勢。 翻譯 | 上手 Webpack ? 這篇就夠了! - 掘金譯者:小 boy (滬江前端開發工程師) 本文原創,轉載請注明作者及出處。 原文地址:https://www.smashingmagazine.... JavaSrip... 讀 Zepto 源碼之代碼結構 - ...
摘要:先介紹一下本人應屆前端開發一枚,非科班出身,專業是化學,大學期間開始自學前端開發,在今年春招實習和秋招的時候投了一些公司,拿到一些京東拼多多虎牙等,總體來說還算滿意,特地寫一篇文章來總結一下面試的那些套路。 showImg(https://segmentfault.com/img/remote/1460000011897700); 先介紹一下本人應屆前端開發一枚,非科班出身,專業是化學...
閱讀 1117·2023-04-26 03:02
閱讀 1161·2023-04-25 19:18
閱讀 2583·2021-11-23 09:51
閱讀 2561·2021-11-11 16:55
閱讀 2614·2021-10-21 09:39
閱讀 1694·2021-10-09 09:59
閱讀 1991·2021-09-26 09:55
閱讀 3512·2021-09-26 09:55