The article source

In recent years, front-end development is more and more rapid, all kinds of cute new to join the front end of this big family, there is a trend to catch up with IOS, super Android! At the same time, meng new people put forward a variety of front-end work problems, in addition to the most basic HTML, CSS, JS three plate ax, the most headache should be about the configuration of the environment, so the environment as a breakthrough point, began a series of front-end development environment configuration article.

This involves front-end environments such as packaging, builds, programming tools, debugging, and so on, as well as front-end and back-end separation, and the use of stretch surfaces in the Nodejs middle layer.

He that will do his work well must first sharpen his tools

In terms of programming tools such as WebStorm, sublime, Atom, VS Code and Brackets, I personally don’t care about them. Each person has his or her own preference and the advantages and disadvantages are obvious. It depends on the acceptance of the individual.

  • WebStorm is very comprehensive, including both pure front-end and Nodejs, including Git, SVN, command line and formatting tools. It is convenient to use, and also supports Nodejs debug directly. As a front-end all-powerful heavyweight IDE, it is very good, but the only drawback is that it is too heavy, which is shown in memory. On startup time.

  • Sublime lightweight text editor 3 is a big improvement over WebStorm 2. The most important feature is its small and flexible size. However, the configuration of various plug-ins requires you to combine them by yourself. And every new computer has to configure once, more cumbersome. (There is now a way to export configuration files for a new computer.)

  • Atom, which is similar to Sublime, is relatively lightweight, and its kernel is mainly written by Nodejs. The front-end is more suitable for the front-end technology stack, but the performance of large files is always complained of, which is not very smooth. Moreover, the plugin is still much less than Sublime, and the whole ecosystem is not as good as Sublime. But because it’s from Github, it’s still popular. I contributed a vUE formatting plug-in

  • VS Code and Brackets are relatively small groups and are rarely used. I have used VS and I feel quite good about them, but the ecology is worse. Moreover, many of the add-on instructions are poorly written and confusing to people. There is also less information on all aspects. Brackets have been used by one of my colleagues. It is very good to use them. It also looks like you can browse web effects in real time.

Personally, I recommend using sublime or Atom as a starter, configure your favorite plugin and get started. However, if you are already used to using Eclipse, I think WebStorm is more suitable for you. Don’t rely too much on tooltips, or you will forget a lot of things.

PS: What if I want to improve my force? Use VIM or Emacs.

MuNiu LiuMa

Grain production is fast, and good transportation is needed to get to the front. For the front end, our transportation is packaging and construction.

Package build tools has experienced a variety of different times, from the service side dominated by packaging building, up to now the front-end himself master of the build utility, the demand of various different building tools, these tools also is actually one of the front-end work ability, because each of these new tools have advantages and disadvantages, familiar with the use of is not very simple things.

Let’s start with the different types:

  • Backend as the main overall packaging tools, the FIS as representative, everyone should know that baidu out more or less of this open source package build tool chain, on the whole have solved the problem of front-end engineering, including optimization, resource loading, module packaging, automation, a series of problems, from the point of view of function very comprehensive, FIS3 upgrade to let a person feel very is also good, Instead of relying on server-side languages such as PHP and Java, Nodejs is used to make it closer to the front-end community. So what are the disadvantages: the ecological environment is not rich enough, the main plug-ins should be provided by Baidu’s own people, and the number of people participating in the community is not enough. I think the reason for this is that FIS2 was dependent on PHP and JAVA at that time, which led to people’s lack of interest in FIS and missed the best opportunity. This actually has a lot to do with Baidu’s own Web technology stack. As a bonus, FIS can be combined with PHP for overall site deployment and construction. The above is mainly to see some analysis of the document, I have not used FIS, if said wrong, please clap brick. There are many such packaged build tools, most of which are internal use of large companies, such as JINGdong, Hornet’s nest, etc., are based on PHP, plus the front-end of the overall build tools.

  • Grunt provides a core build specification, based on files, to combine the entire build behavior using various Grunt plug-ins. One of the things I remember most clearly at the time was the Yeoman build tool I mentioned in the previous article. At its core is Grunt, which automatically generates various plug-in configurations. However, this has major disadvantages: first, the configuration files built are very long and verbose, and second, it is not very efficient, because the way it is built is based on file, each time a new temporary file is generated, which will be invisible disk I/O read and write, so it slows down the overall build speed.

  • Gulp is a new system based on the above shortcomings of Grunt. It draws on the concept of pipes in Unix and uses Nodejs stream to organize the whole construction chain. In the official core, Gulp provides only a few methods. Similar to the basic concept of Grunt, but with many differences, such as separation of configuration and execution, single responsibility for plug-ins, regulation over configuration, and so on. There are many comparisons between the two, as you can see by searching Grunt Gulp. Not much said

  • The new king Webpack, personally feel should be in the first half of 2015 to the beginning of 2016, Webpack suddenly came out, there is a great trend of unifying the whole front-end construction ecology, it seems that now FE people will not point Webpack related, are embarrassed to say that they are the front end. Initially, Webpack should only be compared with modular tools such as Requirejs and Browserify, but its flexible API and rich loader enable it to complete construction events such as Gulp. At present, its ecological environment is very good, with various plug-ins emerging one after another. Vuejs and others have specific loaders to optimize the build style and are arguably the most popular tools. However, the disadvantage is also particularly obvious, is difficult to understand, mainly too flexible, all kinds of ways can be accepted, resulting in no unified standard, configuration is particularly uncomfortable, in the group, generally for the configuration of Webpack is the most problems. Many novice Webpack configuration errors, feel tearless, want to die heart have. There are also many related articles, which recommend the introductory guide of the topic leaf.

  • NPM construction method of forcing lattice ascension. This nguyen yifeng has joked about the changes to the front-end build, saying that the new build tool is the ES6 build tool. How do you comment on Ruan Yifeng’s remarks about the rapid change of front-end tools?

As far as I am concerned, I mainly use Webpack to build. Of course, some of the older system code, due to historical reasons, still use Gulp to build, but also in the transition, Gulp+Webpack. It’s colorful (and a little confusing actually).

Three squirrels — dry stuff


var gulp = require('gulp');
var less = require('gulp-less');
var plugins = require('gulp-load-plugins')();
var pngquant = require('imagemin-pngquant');


gulp.task('default', function(){
    gulp.src('less/zhanzhao.less').pipe(less()).pipe(gulp.dest('css/'));
    gulp.src('less/liuqian.less').pipe(less()).pipe(gulp.dest('css/'));
    gulp.src('less/student.less').pipe(less()).pipe(gulp.dest('css/'));
    return gulp.src('less/company.less').pipe(less()).pipe(gulp.dest('css/'));
});

gulp.task('clean',function(){
    return gulp.src('publish/').pipe(plugins.clean());
});


gulp.task('bulid', ['clean'],function(){
  gulp.src('favicon.ico').pipe(gulp.dest('publish/'));
    gulp.src('download/**/*').pipe(gulp.dest('publish/download/'));
    gulp.src('mail/**/*').pipe(gulp.dest('publish/mail/'));
    gulp.src('statement/**/*').pipe(gulp.dest('publish/statement/'));
    gulp.src('template/**/*').pipe(gulp.dest('publish/template/'));
  gulp.src('css/**/*.css').pipe(plugins.minifyCss()).pipe(gulp.dest('publish/css/'));
    gulp.src('scripts/**/*.js').pipe(plugins.uglify()).pipe(gulp.dest('publish/scripts/'));
  return gulp.src('images/**/*').pipe(plugins.cache(plugins.imagemin({
            optimizationLevel: 5,
            progressive: true,
            svgoPlugins: [{removeViewBox: false}],
            use: [pngquant()]
        }))).pipe(gulp.dest('publish/images/'));
});

gulp.task("revision",['bulid'],function(){
  gulp.src(['template/head-js.html', 'template/baidu.html']).pipe(plugins.concat('head-js.html')).pipe(gulp.dest('publish/template/'));

  return gulp.src(['publish/css/*.css','publish/scripts/config.js','publish/images/**/*'],{base: 'publish'})
        .pipe(plugins.rev())
        .pipe(gulp.dest('publish/'))
        .pipe(plugins.rev.manifest({
          merge: true
        }))
        .pipe(gulp.dest('publish/'));
});


gulp.task("publish", ["revision"],function(){
  var manifestCss = gulp.src("publish/rev-manifest.json"),
      manifestDownload = gulp.src("publish/rev-manifest.json"),
      manifest = gulp.src("publish/rev-manifest.json");

  gulp.src('publish/css/*.css')
    .pipe(plugins.revReplace({manifest: manifest}))
    .pipe(gulp.dest('publish/css/'));
 
  gulp.src('*.html')
    .pipe(plugins.revReplace({manifest: manifestCss}))
    .pipe(gulp.dest('publish/'));

  gulp.src('publish/download/*.html')
    .pipe(plugins.revReplace({manifest: manifestDownload}))
    .pipe(gulp.dest('publish/download/'));
});
Copy the code

Gulpfile is a package that I used to configure myself. It does all the things I mentioned above, except js modular package. This can be studied by yourself. Let me explain what each mission does.

  • Default: The CSS is generated by listening for less changes.

  • Clean, clears the publish folder

  • Bulid, move the source code under publish folder, for some types of file processing, such as CSS compression, JS compression, image compression cache and so on.

  • Revision, MD5 file, according to HTML, CSS references to the relevant file to add MD5 stamp, generate new MD5 stamp file, to keep the file updated.

  • Publish, perform a file replacement based on the new MD5 file generated by the previous revision. Replace the js, CSS, and image reference paths.

In fact, some places can be optimized, this we have time to try their own.

This is the first article in this series, and you are welcome to poke fun and discuss various issues. The second article will focus on Webpack and explain its configuration solutions.