企业建网站费用,网页模板wordpress,深圳seo网站推广方案,济南正规网站建设公司哪家好随着前端项目的飞速发展#xff0c;项目越来越大、文件越来越多#xff0c;前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——grunt、gulp、browserify、webpack 所有的构建工具都是基于NodeJs和Npm#xff0c;所以使用下面任何工具都需要安装Node 一、gru… 随着前端项目的飞速发展项目越来越大、文件越来越多前端工程化的工具也越来越多。下面介绍目前最流行的四种构建工具——grunt、gulp、browserify、webpack 所有的构建工具都是基于NodeJs和Npm所以使用下面任何工具都需要安装Node 一、grunt 1、需要两个文件 Gruntfile.js —— grunt执行任务文件描述项目会执行的任务。 package.json —— 工程描述文件描述项目基本信息和项目中使用到的npm包信息方便其他人了解项目信息、跑起来该项目。 2、安装grunt-cli命令环境和项目里面用到的grunt包 npm install grunt-cli -g mac下面需要sudosudo npm install grunt-cli -g npm install grunt --save-dev // --save-dev表示该npm包在dev开发环境时需要用到加这个会在package.json中自动增加相关包描述。 3、安装grunt任务相关的npm包 npm install xxx --save-dev 4、Gruntfile.js任务写法 module.exports function(grunt){// 加载需要的任务包grunt.loadNpmTasks(grunt-contrib-less);grunt.loadNpmTasks(grunt-contrib-uglify);// 初始化任务grunt.initConfig({less: { //包名a:{ //任务名src: a.less,dest: index.css},b:{src: b.less,dest: main.css}},uglify: {a: {src: aa.js,dest: index.js}}}); // 注册多任务 grunt.registerTask(abc, [less:a, uglify]); } 总结最早开始自动化构建前端项目的工具之一极大提高前端开发过程中的开发效率、更加方便工程化的部署到线上以及优化了线上前端代码。 二、gulp 1、需要两个文件 gulpfile.js —— gulp执行任务文件描述项目会执行的任务。 package.json —— 工程描述文件描述项目基本信息和项目中使用到的npm包信息方便其他人了解项目信息、跑起来该项目。 2、安装gulp-cli命令环境和项目里面用到的gulp包 npm install gulp-cli -g mac下面安装全局包都需要sudo一下sudo npm install gulp-cli -g npm install gulp --save-dev // --save-dev表示该npm包在dev开发环境时需要用到加这个会在package.json中自动增加相关包描述。 3、安装gulp任务相关的npm包 npm install xxx --save-dev 4、gulpfile.js任务写法 // 引用需要的包const gulp require(gulp);
const less require(gulp-less);
const uglify require(gulp-uglify);gulp.task(less:a, function(){gulp.src(a.less).pipe(less()).pipe(gulp.dest(css));
});gulp.task(uglify:a, function(){gulp.src(a.js).pipe(uglify()).pipe(gulp.dest(js));
});
// 注册多任务默认任务用 default
gulp.task(abc, [less:a, uglify:a]); 优点1、执行任务比grunt快原因读取二进制流通过pipe执行2、写法上更优雅、简洁、清晰 三、browserify 使用目的 1、用作模块化跟requireJs、seaJs类似作用 2、构建化构建打包工作 3、可以使用node中的一些内置模块如querystring、path、util等提高工作效率 使用方法 1、安装browserify-cli命令环境和项目中用到的browserify包 npm install -g browserify-cli npm install browserify --save-dev 2、项目中自己编写的模块通过 modules.exports 或 export 抛出去如 // sum.js
module.exports function (sum1, sum2){return sum1sum2;
} 引用时通过 require(./sum) 来使用如 // index.js
var sum require(./sum.js);
var querystring require(querystring);var parse a1b2c2;
console.log(querystring.parse(parse));console.log(sum(11, 12)); 注意使用node内置模块或者通过npm下载的包直接 require(querystring) 即可。但如果是自己编写的模块需要加 ./ require(./sum) 3、编译 // 通过browserify命令将index.js编译成bundle.js
browserify index.js -o bundle.js 4、如果需要 项目自动编译需要安装 全局watchify这个包 npm install -g watchify 执行时就不用browserify命令用watchify命令 watchify index.js -o bundle.js 四、webpack webpack是近来最火的工程化构建工具为什么这么火是因为在webpack中 “一切皆模块” 最大的优点也就在这js、css、less、sass、json、coffer、image、...... 各种类型文件都可以通过loader来处理打包。 1、安装webpack-cli命令环境和项目用刀到的webpack包 npm install -g webpack-cli npm install webpack --save-dev 2、跟browserify第二步一样module.export抛出自定义模块require来模块化引用 3、编译打包 // 跟browserify区别是 没有 -o
webpack index.js bundle.js // -w监视 -p压缩代码
webpack -w -p index.js bundle.js 4、打包less、sass、image等 1安装使用的loader的安装包 // 同时安装多个包可以用 空格 分开
npm install less-loader css-loader style-loader --save-dev 2引用less包等 // index.js
require(style-loader!css-loader!less-loader!./less/index.less);
// 或者省去loader简写成
require(style!css!less!./less/index.less); 如果每个文件的loader都这么写的话太麻烦可以在webpack的配置文件作配置 5、配置文件名webpack.config.js // webpack.config.js
module.exports {module: {loaders: [// less结尾的文件使用style、css、less三种loader处理// 用!连接loader{ test: /\.less$/, loader: style!css!less}]}
}; 此时的index.js入口文件引用index.less require(./less/index.less); 6、配置文件可以配置入口、输出等 module.exports {entry: ./index.js, // 入口文件output: {filename: bundle.js // 出口文件名},module: {loaders: [{ test: /\.less$/, loader: style!css!less}]}
}; 7、如果我们要修改完文件后自动编译、同时刷新浏览器怎么做 1安装webpack-dev-server 全局包 和webpack-dev-server 项目包 npm install webpack-dev-server -g
npm install webpack-dev-server --save-dev 2此时需要使用webpack中另外一个强大的功能——插件plugins在配置文件中配置 // 引用webpack
var webpack require(webpack);module.exports {entry: ./index.js, // 入口文件output: {filename: bundle.js // 出口文件名},plugins: [// 自动刷新浏览器用到的插件new webpack.DefinePlugin({process.env.NODE.ENV:development})],module: {loaders: [{ test: /\.less$/, loader: style!css!less}]}
}; 3执行编译 // --inline表示实时编译
webpack-dev-server --inline 8、如果想把命令写的更简单可以在package.json的script属性中配置 1如何生成package.json文件 // init 命令让你一步步选择、填写安装工程文件的描述
npm init// 或者一步到位
npm init --yes 2配置script属性 {name: webpack,version: 1.0.0,description: ,main: index.js,dependencies: {css-loader: ^0.25.0,less: ^2.7.1,less-loader: ^2.2.3,style-loader: ^0.13.1,webpack: ^1.13.2},devDependencies: {webpack-dev-server: ^1.15.1},scripts: {dev: webpack-dev-server --inline},keywords: [],author: ,license: ISC
} 此时执行变成 npm run dev 是不是更简单了而且在script里面可以方便做多种环境下的配置命令。 以上就是这几种构建工具的基本使用方法希望大家工作过程中尽量使用去体会它在提高效率的同时带给我们编程的快乐感觉 转载于:https://www.cnblogs.com/souyidai/p/util_1.html
