建站
咨詢
售后
建站咨詢
新聞中心
怎么用gulp壓縮js和css文件
/步驟
創(chuàng)新互聯(lián)-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比察哈爾右翼前網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式察哈爾右翼前網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋察哈爾右翼前地區(qū)。費用合理售后完善，10余年實體公司更值得信賴。
首先要確保pc裝nodeglobal環(huán)境項目文件都install gulp
npm install gulp -g (global環(huán)境)
npm install gulp --save-dev (項目環(huán)境)
項目install需要gulp插件般壓縮需要
npm install gulp-minify-css gulp-concat gulp-uglify gulp-rename del --save-dev
更插件鏈接找
項目根目錄新建gulpfile.jsrequire需要module
var gulp = require('gulp'),
minifycss = require('gulp-minify-css'),
concat = require('gulp-concat'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
del = require('del');
壓縮css
gulp.task('minifycss', function() {
return gulp.src('src/*.css') //壓縮文件
.pipe(gulp.dest('minified/css')) //輸文件夾
.pipe(minifycss()); //執(zhí)行壓縮
});
壓縮js
gulp.task('minifyjs', function() {
return gulp.src('src/*.js')
.pipe(concat('main.js')) //合并所jsmain.js
.pipe(gulp.dest('minified/js')) //輸main.js文件夾
.pipe(rename({suffix: '.min'})) //rename壓縮文件名
.pipe(uglify()) //壓縮
.pipe(gulp.dest('minified/js')); //輸
});
執(zhí)行壓縮前先刪除文件夾內(nèi)容
gulp.task('clean', function(cb) {
del(['minified/css', 'minified/js'], cb)
});
默認命令cmd輸入gulp執(zhí)行命令
gulp.task('default', ['clean'], function() {
gulp.start('minifycss', 'minifyjs');
});
要cmd執(zhí)行g(shù)ulp即
webpack 如何配置 CSS抽取 和 打包壓縮
我們一般打包， webpack 會自動把 css 打包到 js 文件中去。 css 抽取 就是是把 css 抽取出來，生成 css 文件單獨打包，然后在進行壓縮。
接下來，我詳細介紹下 css 是如何抽取 和 壓縮的！
如何利用node進行js css合并壓縮
gulp是基于Node.js的前端構(gòu)建工具。所以首先需要安裝nodejs，安裝nodejs。
完成nodejs安裝之后，需要使用npm安裝gulp。
先安裝全局gulp
npm install -g gulp然后在項目根目錄下安裝本地gulp。
此時項目根目錄下會多出下面這個文件夾 node_modules
好的，現(xiàn)在gulp已經(jīng)安裝完成了，但是gulp本身不提供js壓縮合并等功能，需要使用gulp的相關(guān)插件。目前只需要完成js壓縮合并和css文件壓縮的功能，先安裝相應(yīng)的插件：
1.css壓縮 gulp-minify-css
2.js壓縮 gulp-uglify
3.js合并 gulp-concat
由于壓縮之前需要對js代碼進行代碼檢測，壓縮完成之后需要加上min的后綴，我們還需要安裝另外兩個插件：
如何合并多個css文件并且壓縮？有什么方便的工具？
合并css文件，只要把各個css文件里的樣式放在一個css文件里就可以了，如果有重復(fù)的css樣式要去掉重復(fù)的，至于壓縮工具，在百度里面搜一下css壓縮工具就可以了，在線壓縮的，很方便，你試一下
CSS的CSS壓縮方法
理想的情況是只擁有一個CSS文件（如果你使用RWD以支持IE的老版本，那就需要兩個CSS文件。）構(gòu)建并維護幾個單獨的CSS文件也算合理，但在部署到產(chǎn)品服務(wù)器之前，你應(yīng)該將它們集合在一起，并刪掉那些不必要的空白區(qū)域。
Saas、LESS和Stylus等預(yù)處理器可幫你完成這些痛苦的工作。 Grunt.js、 Gulp等工具可自動化你的工作流。如果你更喜歡GUI，可借助Koala提供的免費跨平臺應(yīng)用。
如果你覺得這些比較麻煩，也可手動通過命令行工具將CSS文件集中在一起，如在Windows中，可使用如下代碼：
在Mac/Linux中，可使用如下代碼：
最終文件經(jīng)過在線CSS壓縮工具（如 cssminifier.com、 CSS Compressor Minifieror等）壓縮后即可運行。
最后，請記住在頭部（Head）加載所有CSS，以便瀏覽器展示接下來的HTML元素，同時也可避免瀏覽器下次再重繪頁面元素。
當前名稱：css樣式怎么打包壓縮,css 壓縮
當前路徑：http://www.ef60e0e.cn/article/dseosgc.html
