摘要:完成安裝之后,需要使用安裝。此時項目根目錄下會多出下面這個文件夾好的,現在已經安裝完成了,但是本身不提供壓縮合并等功能,需要使用的相關插件。使用,現在可以使用了,在項目根目錄下創建文件。任務完成,只需要將中,引用的路徑修改成新的路徑即可。
1.安裝gulp
gulp是基于Node.js的前端構建工具。所以首先需要安裝nodejs,安裝nodejs。
完成nodejs安裝之后,需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp
然后在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_modules
好的,現在gulp已經安裝完成了,但是gulp本身不提供js壓縮合并等功能,需要使用gulp的相關插件。目前只需要完成js壓縮合并和css文件壓縮的功能,先安裝相應的插件:
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合并 gulp-concat
由于壓縮之前需要對js代碼進行代碼檢測,壓縮完成之后需要加上min的后綴,我們還需要安裝另外兩個插件:
4.重命名 gulp-rename
5.js代碼檢測 gulp-jshint (或gulp-jslint)
(更多插件可以查看 http://gulpjs.com/plugins/ )
在項目根目錄下執行以下命令:
npm install gulp-minify-css gulp-uglify gulp-concat gulp-rename gulp-jshint --save-dev
安裝好的插件會出現在上面提到的node_modules文件夾中。
ok,現在可以使用gulp了,在項目根目錄下創建gulpfile.js文件。
在gulpfile.js中添加以下代碼
var gulp = require("gulp"), minifycss = require("gulp-minify-css"), concat = require("gulp-concat"), uglify = require("gulp-uglify"), rename = require("gulp-rename"), jshint=require("gulp-jshint"); //語法檢查 gulp.task("jshint", function () { return gulp.src("js/*.js") .pipe(jshint()) .pipe(jshint.reporter("default")); }); //壓縮css gulp.task("minifycss", function() { return gulp.src("css/*.css") //需要操作的文件 .pipe(rename({suffix: ".min"})) //rename壓縮后的文件名 .pipe(minifycss()) //執行壓縮 .pipe(gulp.dest("Css")); //輸出文件夾 }); //壓縮,合并 js gulp.task("minifyjs", function() { return gulp.src("js/*.js") //需要操作的文件 .pipe(concat("main.js")) //合并所有js到main.js .pipe(gulp.dest("js")) //輸出到文件夾 .pipe(rename({suffix: ".min"})) //rename壓縮后的文件名 .pipe(uglify()) //壓縮 .pipe(gulp.dest("Js")); //輸出 }); //默認命令,在cmd中輸入gulp后,執行的就是這個任務(壓縮js需要在檢查js之后操作) gulp.task("default",["jshint"],function() { gulp.start("minifycss","minifyjs"); });
上述代碼中的相關方法可以查看 gulp API docs
在文件根目錄下執行gulp命令:
(如果Js文件有問題時,會出現相應的error提示,按照提示的錯誤信息修改即可)
bingo,現在可以在css文件夾中看到壓縮好的css文件,在js中可以看到合并壓縮好的main.min.js 。任務完成,只需要將html中css,js引用的路徑修改成新的路徑即可。
增加Sassnpm install gulp-sass --save-dev
"use strict"; var gulp = require("gulp"); var sass = require("gulp-sass"); gulp.task("sass", function () { gulp.src("./sass/**/*.scss") .pipe(sass().on("error", sass.logError)) .pipe(gulp.dest("./css")); }); gulp.task("sass:watch", function () { gulp.watch("./sass/**/*.scss", ["sass"]); });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/111249.html
摘要:完成安裝之后,需要使用安裝。此時項目根目錄下會多出下面這個文件夾好的,現在已經安裝完成了,但是本身不提供壓縮合并等功能,需要使用的相關插件。使用,現在可以使用了,在項目根目錄下創建文件。任務完成,只需要將中,引用的路徑修改成新的路徑即可。 1.安裝gulp gulp是基于Node.js的前端構建工具。所以首先需要安裝nodejs,安裝nodejs。 完成nodejs安裝之后,需要使用n...
摘要:所以它在某些程度上,跟的功能有些相同。嚴格上講,模塊化不是他強調的東西,他旨在規范前端開發流程。更是明顯強調模塊化開發,而那些文件壓縮合并預處理等功能,不過是他附帶的功能。 1. webpack 是什么? showImg(https://segmentfault.com/img/remote/1460000012293461); 先來說一下 webpack 是什么。 webpack 的...
摘要:通過本文,我們將學習如何使用來改變開發流程,從而使開發更加快速高效。中文網站詳細入門教程使用是基于的,需要要安裝為了確保依賴環境正確,我們先執行幾個簡單的命令檢查。詳盡使用參見官方文檔,中文文檔項目地址 為了UED前端團隊更好的協作開發同時提高項目編碼質量,我們需要將Web前端使用工程化方式構建; 目前需要一些簡單的功能: 1. 壓縮HTML 2. 檢查JS 3. 編譯SA...
閱讀 2178·2021-11-24 09:38
閱讀 3242·2021-11-08 13:27
閱讀 3083·2021-09-10 10:51
閱讀 3142·2019-08-29 12:20
閱讀 663·2019-08-28 18:28
閱讀 3459·2019-08-26 11:53
閱讀 2706·2019-08-26 11:46
閱讀 1514·2019-08-26 10:56